Is this possible?
logo only visible in sticky menu
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Replies on this thread are closed. Please create a new thread if you have a question,
or purchase a SiteOrigin Premium license if you need one-on-one email support.
Hi Mail Box
Thanks for reaching out. If you’re using the default masthead layout then it’s unfortunately not possible to show the logo in the menu once it becomes sticky.
If you are using the Logo in Menu layout it’s possible to use the below Custom CSS to only display the logo on scroll:
#masthead.masthead-logo-in-menu .logo > img { display: none; } #masthead.masthead-logo-in-menu.sticky .logo > img { display: block; }Vantage Premium: Insert the above at Appearance > Custom CSS.
Vantage Free: Use a plugin like Simple Custom CSS or Jetpack Custom CSS.
Thank you for the quick response, the css provided removes the logo from the menu but does not display it when the menu becomes sticky.
I do have logo in menu and sticky menu enabled.
Sure. Please send through a link to your site and we’ll take a look.
This is a private message.
Thanks, try the following instead:
#masthead.masthead-logo-in-menu .logo > img { opacity: 0; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } #masthead.masthead-logo-in-menu .sticky .logo > img { opacity: 1; }That’s it, thanks.
To make it more complicated, can i limit this functionality to the homepage only?
Sure, that would be:
.home #masthead.masthead-logo-in-menu .logo > img { opacity: 0; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .home #masthead.masthead-logo-in-menu .sticky .logo > img { opacity: 1; }thanks again, i should have figured out that last one myself
No problem :) Glad we could help.
So I’ve got the example CSS working with the logo in menu but how do I get a smooth transition when I scroll back to the top, so the logo goes from small to big?
/*Expand logo image size*/
#masthead.masthead-logo-in-menu .logo > img {
max-height: 63px;
width: auto;
height: auto;
max-width: 100%;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
/*Shrink logo image size*/
#masthead.masthead-logo-in-menu .sticky .logo > img {
max-height: 43px;
width: auto;
height: auto;
max-width: 100%;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
Thank
Posted wrong code above. It was meant to be transition.
/*Expand logo image size*/
#masthead.masthead-logo-in-menu .logo > img {
max-height: 63px;
width: auto;
height: auto;
max-width: 100%;
-moz-transition: 0.5s opacity;
-ms-transition: 0.5s opacity;
-o-transition: 0.5s opacity;
-webkit-transition: 0.5s opacity;
transition: 0.5s opacity;
}
/*Shrink logo image size*/
#masthead.masthead-logo-in-menu .sticky .logo > img {
max-height: 43px;
width: auto;
height: auto;
max-width: 100%;
-moz-transition: 0.5s opacity;
-ms-transition: 0.5s opacity;
-o-transition: 0.5s opacity;
-webkit-transition: 0.5s opacity;
transition: 0.5s opacity;
}
Whoops, posted wrong code twice. It was meant to be transition.
/*Expand logo image size*/
#masthead.masthead-logo-in-menu .logo > img {
max-height: 63px;
/* width: auto;
height: auto;*/
/*max-width: 100%;*/
/*opacity: 0;*/
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
/*Shrink logo image size*/
#masthead.masthead-logo-in-menu .sticky .logo > img {
max-height: 43px;
/* width: auto;
height: auto;*/
/*max-width: 100%;*/
/*opacity: 1;*/
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}