Fixed NavBar

Question

How to make a nav bar which wont move as the browser's size is decreasing? I suppose it has something with positions or floats, I am just too stupid to understand it. As soon as I start to less the broweser's size nav goes first vertically down, then some items go beyond the screen.. i am totally confused.. every template i watched doesn't have that problem.. mostly they are not mobile friendly, but at least maintain the order of the elements.. on my page everything is moving..

Answer 1

position: fixed;

Answer 2

Post your code*:

The solution is necessarly to deal with 'position: fixed;' ( if the behaviour expected is to have a nav bar always displaying if user scroll down ) and need often case by case searching tips and tricks for obtain the desired result ( when you don't be obligated to adapt if no acceptable solution is found ^^ )

*( if you already have it in code playground, post the link, or made it public to allow us to find it in your profil... )

Answer 3

I've found out the solution somehow.. min-width of the header needed to be set up, in order for elements to stay where they are originally placed. Stackoverflow gives the best problem solutions and w3school gives the best theory explainations. Those apps are just for basic, basic understanding. I've just realized how much I don't know about CSS, this app missed so many important things, leaving us only with the most simple examples.

Answer 4

@Wolfinho:

This app provide good introducing/refreshing wide basis. However, allow the user who overcome the next step as practice coding, to get te good reaction as you do: search by yourself inside abundance of ressources available on the net :)

Answer 5

when i put position fixed list items inside the nav totally freak out.. half of them cantbe seen, and other half is up on the half of header