How can I make header sticky at the top too?

Hi
Thanks for contacting to us.
Pls share your website URL.
Which bar is hiding pls send snapshot of the bar hiding at your end.

Thanks

Hi @akhileshnagar

You can see here: [ link moved to link field ]

When you scroll down the menu stays but the green bar at the top disappears.

• This reply was modified 2 years, 5 months ago by Jan Dembowski.

Hi
To fix the green bar also add the below css code inside the appearance >> customzier >> additional css box.

header.header-sidebar {
    position: fixed;
    width: 100%;
    z-index: 1000;
    display: block!important;
}
nav.navbar.navbar-expand-lg.navbar-light.header-sticky {
    padding-top: 40px;
}
nav.navbar.navbar-expand-lg.navbar-light.header-sticky.stickymenu {
    padding-top: 0;
    top:36px;
}

Let me know if you have any confusion.

Thanks
Akhilesh

@akhileshnagar thanks so much that works great.

There is still an issue that it seems to jump when you scroll down on mobile. That then hides the bottom of the top bar.

• This reply was modified 2 years, 5 months ago by aabri.

Hi
For this add the below css code inside the customizer >> additional css box.

@media only screen and (max-width: 600px) { 

.stickymenu {
    z-index: 999;
    
}
}

Let me know for any confusion.
Thanks

@akhileshnagar I’m afraid the issue of the whole top part of the screen jumping down on mobile as you scroll still occurs. I’m not sure if this intended?

Hi
TO fix the jumping issue add the below css code inside the customizer >> additional css box.

@media (max-width: 600px){
.navbar .navbar-toggler {
    margin-bottom: 0px;
}
nav.navbar.navbar-expand-lg.navbar-light.header-sticky {
    margin-bottom: 25px;
}
}

Let me know for any confusion.
Thanks
Akhilesh