Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Sticky Menu Position

Home Forums Support [Resolved] Sticky Menu Position

Home Forums Support Sticky Menu Position

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #515623
    CG Klein

    Hello,

    I am using the flowing css to make the top bar sticky and want the primary menu to go underneath when it becomes sticky. Please help!

    .top-bar {
    position: sticky;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    }

    Thank you,
    cgk

    GeneratePress 2.0.2
    #515814
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    .navigation-stick {
        top: 45px !important;
    }
    #515821
    CG Klein

    Hello,

    Worked great!

    Thank you much!
    cgk

    #515827
    CG Klein

    Hello,

    I spoke to soon, needs different value to work on mobile and dos not work with hide when scrolling down.
    Any ideas?

    Thanks again,
    cgk

    #515843
    CG Klein

    Hi,

    Maybe something like this,

    }
    .sticky-mobile-header {
    top: 90px !important;
    }

    Thanks,
    cgk

    #516099
    Tom
    Lead Developer
    Lead Developer

    You’ll need to write a media query to increase or decrease the top value on mobile:

    @media (max-width: 768px) {
        .navigation-stick {
            top: 90px !important;
        }
    }

    What about it doesn’t work when the nav only appears when scrolling up?

    #516185
    CG Klein

    OK,

    That css worked for the mobile with 80px.

    The hide when scrolling down dose not hide but shows menu when scrolling down on both desktop and mobile.

    Thank you,
    cgk

    #516203
    CG Klein

    Also the top bar diapers when using the side-out menu and not at the top of the screen.

    #516228
    CG Klein

    This is what I have so far.

    .top-bar {
    position: sticky;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    }
    .navigation-stick {
    top: 45px !important;
    }

    @media
    (max-width: 768px) {
    .navigation-stick {
    top: 55px !important;
    }
    }

    @media
    (max-width: 420px) {
    .navigation-stick {
    top: 80px !important;
    }
    }

    @media
    (max-width: 320px) {
    .navigation-stick {
    top: 115px !important;
    }
    }

    #516527
    Tom
    Lead Developer
    Lead Developer

    Instead of position: sticky;, try position: fixed;

    As for the hide when scrolling down, I’d need to see it to come up with the fix.

    #516542
    CG Klein

    When I use “fixed” it places menu under top bar unless I scroll down.
    I can make you a login if you would please take a look.

    https://www.kosirs.com/wp-admin/

    #516543
    Tom
    Lead Developer
    Lead Developer

    I’m getting this message while trying to set the password: Sorry, your request cannot be accepted.

    #516544
    CG Klein

    ip block i will disable for CA

    #516555
    Tom
    Lead Developer
    Lead Developer

    Got it.

    Add this:

    body {
        padding-top: 45px;
    }

    That will allow you to use position: fixed; instead of position: sticky;

    Then instead of top: 45px !important; use margin-top: 45px !important;

    #516562
    CG Klein

    That dose allow me to use fixed so the top bar dose not disappear on mobile when using side-out menu but the spacing is off on mobile. The hide when scrolling down dose not work on desktop or mobile.

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