This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

12
  1. Andrew Misplon Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

    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. Andrew Misplon Staff 10 years, 10 months ago

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

  4. mail box Private 10 years, 10 months ago

    This is a private message.

  5. Andrew Misplon Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

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

  7. Andrew Misplon Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

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

  9. Andrew Misplon Staff 10 years, 10 months ago

    No problem :) Glad we could help.

  10. breathee 9 years, 4 months ago

    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. breathee 9 years, 4 months ago

    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. breathee 9 years, 4 months ago

    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.

Have a different question or issue?

Start New Thread