[Resolved] Position sticky logo above navigation which is left aligned.

Home Forums Support [Resolved] Position sticky logo above navigation which is left aligned.

Home Forums Support Position sticky logo above navigation which is left aligned.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2056075
    Patricia

    I need to duplicate a client’s troublesome theme in GeneratePress and am having trouble with the sticky menu.

    The current site / theme: https://americanheritagepublications.com

    My GP site I’m using for testing: https://whitewingdesign.com/bbbrown

    I need the site logo to remain above the left aligned navigation. I can correctly size the logo later but am unable to position it above the navigation.

    Thanks, as always!

    #2056096
    Ying
    Staff
    Customer Support

    Hi Patricia,

    If you don’t need animation during the transition between the primary navigation to sticky navigation, then I would suggest disable the sticky navigation option, but use CSS instead.

    You are using navigation as header option, try disabling that option as well, set navigation location to below header.

    You should be able to align the header and primary navigation individually in customizer.

    Once it’s done, we can help with custom CSS to make the header and primary navigation sticky.

    Let me know ๐Ÿ™‚

    #2056161
    Patricia

    Thank you for the quick response. I now have the logo as site identity and have the primary navigation in place (aligned left). How do I make the logo & navigation sticky?

    https://whitewingdesign.com/bbbrown

    #2056195
    Ying
    Staff
    Customer Support

    Try this CSS:

    nav#site-navigation, header#masthead {
        position: fixed;
        width: 100%;
    }
    nav#site-navigation {
        top: 80.17px;
    }
    header#masthead {
        top: 0;
    }

    The value of80.17px is the height of the current header, if you change the logo size the height will change, you’ll need to update this value by then ๐Ÿ™‚

    #2057042
    Patricia

    I’ve added the CSS to customize>additional css but it did not produce a sticky header/nav area.

    #2057752
    David
    Staff
    Customer Support

    Hi there,

    remove the CSS that Ying provided.
    Then add this CSS, but can you add it to the very top of the Additional CSS:

    header.site-header, .main-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    .main-navigation {
        top: 80px;
    }
    #2057915
    Patricia

    This worked very well. Thank you for quick response.

    #2058333
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.