[Resolved] Topbar AND Primary Menue Sticky?

Home Forums Support [Resolved] Topbar AND Primary Menue Sticky?

Home Forums Support Topbar AND Primary Menue Sticky?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2072584
    Sven

    Hello,

    i used this https://generatepress.com/forums/topic/make-top-bar-sticky/ to make my topbar sticky.

    But as i also have my Primary Menu sticky it does not work. The topbar is hidden behind the Menubar.

    Is there any chance to have both sticky?

    Thanks in advance.

    #2072634
    David
    Staff
    Customer Support

    Hi there,

    i would do this:

    1. Disable the Customizer > Layout > Sticky Navigation.

    2. Add this CSS:

    @media(min-width: 769px) {
        .main-navigation,
        .top-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }
        .main-navigation {
            top: 39px; /* offset height of top bar */
        }
        /* Offset for admin bar */
        .admin-bar .top-bar {
            top: 32px;
        }
        .admin-bar .main-navigation {
            top: 71px;
        }
    }

    3. If requied enable the Customizer > Layout > Header -> Mobile Header sticky option.

    I made the assumption you may not want the Top Bar sticky on mobile as it and the mobile header would occupy a lot of space on small devices.

    #2072756
    Sven

    Thanks a lot David. The GP Support is really great.

    Could you see the changed page (link in private area) and see, why the content from my containers are visible through my topbar, when scrolling?

    If you scroll the content to the bottom the content shines through the top-bar. The strange thing is: The first container is not visble throught the topbar background. The following containers are visble throught the topbar background.

    I hope i could explain the problem.

    Best regards and thanks a lot for all those support.

    #2072891
    Ying
    Staff
    Customer Support

    Hi Sven,

    Try add this CSS as well:

    .top-bar {
        z-index: 99;
    }
    #2073186
    Sven

    THANK YOU! Works perfect now.

    #2073611
    Ying
    Staff
    Customer Support

    You are welcome 🙂

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