How to have separate logos

[dashmista]

Hi,

I want one logo for the small box before scrolling (used to have bowtie logo), and then one for the menu. It appears my logo width is too much for the small box, so I need to make a shortened version. Thanks.

[SeaTheme]

HI,

it needs custom css, i don’t suggest use 2 logos, the animation will be not smooth.

You can try this way:

Please login wp-admin, go to Theone / General Settings / Custom Css, paste the style code to Custom Css(change as the logo url as yours.):

body.page #header.menu-default-hide #logo { background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
body.page #header.menu-default-hide #logo .logo-image {opacity:0; }
@-webkit-keyframes logoAnimationZip {
  0%{ left: 50%; -webkit-transform: translateX(-50%); background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
  50%{ left: 50%; -webkit-transform: translateX(-50%); background: none;}
  100%{ left: 0; -webkit-transform: translateX(0); background:none}
}
@-moz-keyframes logoAnimationZip {
  0%{ left: 50%; -webkit-transform: translateX(-50%); background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
  50%{ left: 50%; -webkit-transform: translateX(-50%); background: none;}
  100%{ left: 0; -webkit-transform: translateX(0); background:none}
}
@keyframes logoAnimationZip {
  0%{ left: 50%; -webkit-transform: translateX(-50%); background: url(http://xxxx.com/logo-in-box.png) no-repeat 50% 50%; }
  50%{ left: 50%; -webkit-transform: translateX(-50%); background: none;}
  100%{ left: 0; -webkit-transform: translateX(0); background:none}
}
@-webkit-keyframes logoImgZip {
  0%{ max-height: 60px; opacity:0; }
  50%{ max-height: 40px; opacity:1; }
  100%{ max-height: 40px;opacity:1;  }
}
@-moz-keyframes logoImgZip {
  0%{ max-height: 60px; opacity:0; }
  50%{ max-height: 40px; opacity:1; }
  100%{ max-height: 40px;opacity:1;  }
}
@keyframes logoImgZip {
  0%{ max-height: 60px; opacity:0; }
  50%{ max-height: 40px; opacity:1; }
  100%{ max-height: 40px;opacity:1;  }
}

[dashmista]

Thank you.

Is that the technique used on http://www.pixelkicks.co.uk/? It seems their animation transition is smooth. How can I do one like this?

[SeaTheme]

Hi, I improved the custom css code. It is better now.
Note: Don’t paste the to Custom css, there is a issue for exporting quotation marks.
please use child theme, paste the css to ../themes/theone-child/custom.css;
Or: paste to last line of ../themes/theone/style.css

body.page #header.menu-default-hide #logo .logo-image { opacity:1; }
#logo a:before { content:''; position:absolute; left: 0;top: 0; width: 150px; height: 100%; 
background: url(http://xxx/Long-Logo-on-MenuBar.png) no-repeat 50% 50%; background-size: 120px auto;  }
body.page #header.menu-default-hide #logo a:before { 
  opacity: 0; 
  -webkit-animation:longlogoImgZip 1s ease normal both; 
  -moz-animation:longlogoImgZip 1s ease normal both; 
  animation:longlogoImgZip 1s ease normal both; 
}
body.page #header.menu-default-hide.header-slide-down #logo a:before {
opacity: 1; 
  -webkit-animation:longlogoImgUnZip 1s ease normal both; 
  -moz-animation:longlogoImgUnZip 1s ease normal both; 
 animation:longlogoImgUnZip 1s ease normal both; 
}
@-webkit-keyframes longlogoImgZip {
  0%{  opacity:1; }
  10%{ opacity:0; }
  100%{ opacity:0;  }
}
@-moz-keyframes longlogoImgZip {
  0%{  opacity:1; }
  10%{ opacity:0; }
  100%{ opacity:0;  }
}
@keyframes longlogoImgZip {
  0%{  opacity:1; }
  10%{ opacity:0; }
  100%{ opacity:0;  }
}
@-webkit-keyframes longlogoImgUnZip {
  0%{  opacity:0; }
  90%{ opacity:0; }
  100%{ opacity:1;  }
}
@-moz-keyframes longlogoImgUnZip {
  0%{  opacity:0; }
  90%{ opacity:0; }
  100%{ opacity:1;  }
}
@keyframes longlogoImgUnZip {
  0%{  opacity:0; }
  90%{ opacity:0; }
  100%{ opacity:1;  }
}
@-webkit-keyframes logoImgZip {
  0%{ max-height: 60px; opacity:1; }
  50%{ max-height: 40px; opacity:1; }
  100%{ max-height: 40px; opacity:0;  }
}
@-moz-keyframes logoImgZip {
  0%{ max-height: 60px; opacity:1; }
  50%{ max-height: 40px; opacity:1; }
  100%{ max-height: 40px; opacity:0;  }
}
@keyframes logoImgZip {
  0%{ max-height: 60px; opacity:1; }
  50%{ max-height: 40px; opacity:1; }
  100%{ max-height: 40px; opacity:0;  }
}

[SeaTheme]

• Put the logo in box by Theone / General Settings / Custom Logo
• Put the logo in menu bar by above css code(replace as yours url) : ...background: url(http://xxx/Long-Logo-on-MenuBar.png)...

[dashmista]

Perfect!! Thank you. One last thing: with this custom css, how can I increase the size of the logo? I tried the code you showed before (without this separate logo) but it does not work now.

[SeaTheme]

Welcome, which logo? if that you mentioned is Long-Logo-on-MenuBar.png, in above custom css, there are 2 sizes, increase them:
#logo a:before { ... width: 150px; ... background-size: 120px auto; ... }

[dashmista]

I want to increase the size of both the logo in the box and the menu. Strange, with the custom css file uploaded, the css editor in wp-admin does not work?

[SeaTheme]

For logo in box, add css code:
body.page #header.menu-default-hide #logo .logo-image { max-height: 80px; }

change all max-height: 60px; of above css as max-height: 80px;

all code I have tested, plz check yours double.

[dashmista]

Thanks.

So I have successfully gotten separate logos and the correct sizes. However… Now I am experiencing a problem because of this custom css: http://uxdash.com/?p=1814 do you see it creates both logos now in the header? The home page uxdash.com is working fine, but subpages are not working with the logos. How can I fix this?

[SeaTheme]

Hi, it is not custom css issue. It is origin design, the header layout works only for page (https://www.dropbox.com/s/30gq33gtqfatly2/QQ20150226-2.jpg?dl=0), there is narmal header for all posts.

[dashmista]

Ok thanks. So what do I do? How do I stop the overlap of both logos in the header here:http://uxdash.com/?p=1814 and for all sub-pages? I can’t have that.

[SeaTheme]

Please add the custom css code: body:not(.page) .logo-image {display: none;}

[dashmista]

Perfect. Thank you.

[dashmista]

This reply has been marked as private.

[dashmista]

Fixed it! My apologies.

[Author]

Posts