Home>Support>logo only visible in sticky menu
  1. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    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.

  2. 6 years, 8 months ago mail box

    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.

  3. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Sure. Please send through a link to your site and we’ll take a look.

  4. 6 years, 8 months ago Private Message - mail box

    This is a private message.

  5. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    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;
    }
    
  6. 6 years, 8 months ago mail box

    That’s it, thanks.
    To make it more complicated, can i limit this functionality to the homepage only?

  7. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    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;
    }
    
  8. 6 years, 8 months ago mail box

    thanks again, i should have figured out that last one myself

  9. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    No problem :) Glad we could help.

  10. 5 years, 3 months ago breathee

    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

  11. 5 years, 3 months ago breathee

    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;
    }

  12. 5 years, 3 months ago breathee

    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;
    }

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More