[Resolved] Fixed top bar and navigation bar

Home Forums Support [Resolved] Fixed top bar and navigation bar

Home Forums Support Fixed top bar and navigation bar

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #659949
    Brett

    I would like to make both top bar sticky and the navigation bar fixed in mobile and desktop, with the top bar above the nav bar. I found similar CSS:
    .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    }

    .admin-bar .top-bar {
    top: 32px;
    }

    However, both bars are at the top and overlap one another. I was able to manipulate the CSS as follows:
    .top-bar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    }

    .admin-bar .top-bar {
    top: 32px;
    }
    This puts the nav bar at top of page and the top bar directly below. But it is not the order which I want the bars (I am looking the call now at top and the navigation links just below). Also the logo overlaps the top bar when scrolling and the top bar kind of squishes under the nav bar while scrolling. Any ideas? Thank you.

    GP Premium 1.7.2
    #660028
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try Tom’s solution here?
    https://generatepress.com/forums/topic/top-bar-fixed/#post-431244

    Let me know ๐Ÿ™‚

    #660039
    Brett

    I found this post, but had no luck with either of the codes. I changed the position from “absolute” to “fixed” in the code

    For this code:
    .top-bar {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    }
    Both the nav bar and top bar are held at the top, however the nav bar is hidden behind the top bar and it not seen.

    For this code:
    .top-bar {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    }

    body {
    padding-top: 39px; /* height of your top bar */
    }

    Both bars are held, and they are in the correct order. But when I start to scroll down, the nav bar scrolls under the top bar and sticks there. This code could work if there is a way to add a line that holds the nav bar at a certain px under the top bar.
    I left the coding on site so you can see.

    #660088
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try adding this CSS as well:

    #sticky-navigation,
    #site-navigation,
    #mobile-header {
        position: fixed;
        left: 0;
        right: 0;
        top: 41px !important;
    }
    
    #sticky-placeholder {
        display: block !important;
    }
    #660549
    Brett

    The CSS fixed the navigation bar in desktop, but not the mobile header for mobile/tablets. With mobile header on & sticky on, it rolls under the top bar and sticks under the top bar. I changed the setting so that the mobile header is off – the navigation menu sticks where it needs to and the logo is in the under in header (this is the current setting of the site).

    Thank you for responding!

    #660725
    Tom
    Lead Developer
    Lead Developer

    I just adjusted the CSS above so it should work with the mobile header as well ๐Ÿ™‚

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