[Resolved] Static and Sticky Navigation logo

Home Forums Support [Resolved] Static and Sticky Navigation logo

Home Forums Support Static and Sticky Navigation logo

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1406613
    Nimie

    I am looking to create a static and sticky nav logo. I did this on a site while back but now all the options in GP have changed and I have to use the nav as header option. I am stuck trying to achieve the same look. I m attaching the link to the site that has what I am looking to achieve.

    #1406619
    Leo
    Staff
    Customer Support

    Hi there,

    The navigation as a header option should work still – we just need to adjust some CSS.

    Can you link me to the site you are currently working on?

    Let me know πŸ™‚

    #1406669
    Nimie
    #1406936
    Leo
    Staff
    Customer Support

    Try this CSS:

    .main-navigation .navigation-branding .site-logo {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
    }
    .main-navigation .navigation-branding .site-logo img {
        height: 200px;
    }
    #1408093
    Nimie

    Used code. Didn’t change anything.

    #1408132
    Leo
    Staff
    Customer Support

    I’m not seeing the code being added.

    It works when I tested with the browser inspector tool:
    https://www.screencast.com/t/aqoosrGIRR

    #1408150
    Nimie

    Just went back refreshed, readded, refreshed. NO change and the code was there. There should be no conflicts or cache. I agree the code should work. I tried a different browser and a different internet connection to avoid modem cache.

    #1408170
    Leo
    Staff
    Customer Support
    #1408184
    Nimie

    Pesky period. That is close to what I want. On the example site the logo still floats off the nav when scrolling. It shrinks somewhat but still is larger than the nav. This is what was used on that site:

    @media
    (min-width: 769px){
    .main-navigation .sticky-logo {
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 100;
    }
    .main-navigation.navigation-stick .site-logo {
    top: 0;
    }
    body .main-navigation:not(.navigation-stick) .sticky-logo,
    body .main-navigation:not(.navigation-stick) .sticky-logo img {
    height: 250px;
    }
    body .main-navigation.navigation-stick .sticky-logo,
    body .main-navigation.navigation-stick .sticky-logo img {
    height: 100px;
    }
    }

    @media
    (max-width: 769px){
    .main-navigation .sticky-logo {
    position: absolute;
    top: -10px;
    left: 0;
    z-index: 90;
    }
    .main-navigation:not(.navigation-stick) .sticky-logo,
    body .main-navigation:not(.navigation-stick) .sticky-logo img {
    height: 100px;
    }

    #1408186
    Leo
    Staff
    Customer Support

    Is the sticky navigation logo the same as the static logo?

    If so can you actually remove that first? Shouldn’t need to add it twice.

    Then I can tweak the CSS.

    Let me know πŸ™‚

    #1408197
    Nimie

    Ahhh that did it. If I want the logo to shrink slightly?

    #1408219
    Leo
    Staff
    Customer Support

    Add this CSS:

    .main-navigation.navigation-stick .navigation-branding .site-logo img {
        height: 120px;
    }
    #1408221
    Nimie

    Perfect, as always you guys rock the customer service. Thanks for your help.

    #1408241
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.