Mobile nav bar not sticking to top upon scroll

Support
#1

I’ve created a navigation bar for mobile devices for the homepage of my site: https://www.bourbonbanter.com/

Unfortunately, when you scroll and the nav bar scrolls to the top but then jumps down leaving a gap between the bar and the top of the screen. does anyone have an idea how to fix this?

#2

Hi There,

Try adding mobile-fix-top on the class field of the fixed bar for mobile. Then we can add this custom CSS to fixed the space on top:

  top: 0 !important;
}```

Hope this helps.
#3

I tried adding mobile-fix-top to the class field of the fixed bar for mobile, as well as the container holding the nav elements. I then added the code to the CSS for the header. Neither combination seems to work. There is still the gap at the top of the screen.

Did I add the CSS to the wrong place?

You can view this live at bourbonbanter.com on an iPhone for sure.

#4

One more thing I’ve noticed. In the attached image I have a margin around the logo but when actually viewing on iPhone the margins disappear and thing shrink alot. How can I make sure the image stays a bit larger and the margins don’t disappear?

#5

Hi there,

You added the CSS code correctly, we had a typo in the code. Please kindly change it to:

.mobile-fix-top {
top: 0 !important;
}

I did not see the logo regarding the second question. Would you please kindly give us the Exact URL of the page you have the logo at the top to follow up?

Thank you.

#6

I made that change (thank you) but it did not fix the issue. I’ve attached 2 images. One shows that the gap still remains between the nav bar and the top of the screen when you scroll.

The 2nd image shows the logo at the top of the page when you first come to it. (www.bourbonbanter.com is the page to reference) It looks like I was finally able to get some margins around the top/bottom of the logo but I’d like the entire header section to be a bit larger. How do I change that?

#7

Hi there,

Please kindly get back to us with the URL/User/Pass of your Wordpress installation using the Secure Post feature of the post to double-check how you add the code and why it is not working for you while it is working for us when adding the CSS code via the browser developer toolbar.

Thank you.