Question: How to fix the navbar position to the top once the screen is resized?

Use media queries in CSS, e.g;

@media all and (max-width: 38em) {

 nav {
  position: fixed;
  top: 0;
 }

}

Thanks Andrew,

This was an interesting post and very insightful: I tried to do something like this without luck:(

@media all and (max-width: 4500px) and (min-width: 1200px) {

#topmenu .navbar-inner {
position: fixed;
border-top: 32px;
}
}

I noticed that, when the drop-down (three line menu) becomes activated, it recognizes the top menu and therefore border-top: 0px; puts two menus under each other in a neat way.

However, on the standard size, this does not happen. So as you can see in the link in my previous post, one menu covers the other one.

If I use something like this:

#topmenu {border-top:32px;}

Then the standard screen gets fixed but on the smaller screens, there is a 32px space between two menus.

What did I do wrong? Any thoughts?

There’s nothing apparently wrong from the CSS you wrote (above), can you link the webpage with the issue?

Aboslutely:

This is the link: https://www.charchub.com/en

If you go to this page, you see two menus are overlapping, because in the #topmenu the border-top is set as 0px.

If you resize and make the screen smaller, though, you sill see both menus. Now, if I set the border-top as 32px (which is the height of the black menu on top), the full screen will look perfect, but on a smaller screen, there will be a 32px space between the top and three line menu.

How about using the ‘top‘ position to move ‘#topmenu‘ down?

.navbar-fixed-top {
 top: 34px;
}

I can send you my admin if you want to take a look at the css stylesheet: May I have your email?

Sorry we encourage support to be kept on these forums so that anyone else who is experiencing the same issue is not left out when they visit forum threads.

Sure; I understand and I appreciate your great help. Actually I was impressed and surprised by all this great support.

I used this and it didn’t fix it:(

#topmenu .navbar-fixed-top {
top: 34px;
}

Hi again Charchub, you’ve accidentally used a hash character instead of a full stop character.

Try this:

.navbar-fixed-top {
 top: 34px;
}

Andrew, Thank you so much! It fixed it: I didn’t add the code at the right place, but then I added under the right part of the code and it did the trick.

You are awesome!