[Resolved] Fixed top bar and navigation bar

[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.

[Leo]

Hi there,

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

Let me know 🙂

[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.

[Tom]

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;
}

[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!

[Tom]

I just adjusted the CSS above so it should work with the mobile header as well 🙂

[Author]

Posts