Menu
On desktop the navbar stays fixed to the top, with no issues when scrolling. However when I pull up the site on my phone/use chrome devtools, the navbar initially loads fine until I begin scrolling which causes the navbar to float up to (what seems) the top of the device which ends up cutting off about 50% of the navbar.
I began by commenting out some of my custom css that I wrote for the navbar to see if that fixed it, it didnt. So than I jumped in and wrote media queries for what I thought might be causing the issue. That didn't help(other than finally getting me to write the media queries I should have been the entire time). I then found a resource saying I just needed to add an offset/margin-top to fix the issue however that did nothing either.
<nav id="navbar-scrollspy" class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar nav-sm-query">
Expected Result: Navbar stays fixed-top to the current viewport on mobile
Actual Result: Navbar appears to fixed-top to top of device causing navbar to be cut by 30 - 75%
359
asked Oct 21 '25 12:10
This may relate to your viewport settings in your <head>. Try adding 'minimum-scale=1' to the viewport meta.
So for example, my viewport settings now look like the following, and I no longer lose the top 50% of a fixed position navbar.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With