Geek Answers Handbook

Move the navigation bar to lower resolutions

I am trying to use HTML5 / CSS3 as an educational process, but I am trying to create a navigation bar for links to other sections on my pages. I adapted the code from the found tutorial and it works, but only when viewing at 1080p, if the width is less, the panel is wrapped in other lines.

How to ensure that the navigation bar occupies only one line (shrinks to fit) no matter what resolution the user uses?

img

Here is my CSS code for the navigation bar. Please note: under the navigation, I set the width to 33.3% and the indentation also to center the buttons. I do not know if this is the reason.

nav { display:block; position: absolute; left:0; white-space:nowrap; margin: 0 auto; width: 33.3%; background-color:#ff6600; padding-left: 33.3%; padding-right: 33.3%; } nav ul { margin: 0 auto; width: 100%; list-style: none; display: inline; white-space:nowrap; } nav ul li { float: left; position: relative; white-space:nowrap; } nav ul li a { display: block; margin: 0 auto; width: 150px; font-size: 16px; font-family: century gothic; line-height: 44px; text-align: center; text-decoration: none; color:#575757; white-space:nowrap; } nav ul ul { width: 200px; position:absolute; top:-99999px; left:0; opacity: 0; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; z-index:497; background:#333; padding: 2px; border:1px solid #444; border-top:none; box-shadow:#111 0 3px 4px; } nav ul ul li a { display: block; width: 200px; text-align: left; padding-left: 3px; font-size: 14px; } nav ul li:hover>ul{ opacity: 1; position:absolute; top:98%; left:0; } nav ul li a:hover { color: #fff; background-color: #cc3300 } nav ul li.selected a { color: #fff; background-color: #cc3300; }
+7
source share
2 answers

You almost did it right. The problem with your css is that white-space: nowrap; only works for inline elements, but you use float . Floating elements become blocky, even if the display: inline; property is set for this element display: inline; (it will not apply). So - if you replace your floats with display: inline-block; - your white-space property will work :)

Below is a live example of inline-block and white-space : http://jsfiddle.net/skip405/wzgcH/

As for your centering method, there is a better solution. (You can remove the padding and set the correct width). Especially if you use inline blocks. Just set text-align: center; on their parent - and you get it centered.

+11
source

The problem is that you set the nav width to 33.3% and the rest in words. The small allowable space then pushes all the elements under each other when resizing at a certain point. To prevent this from happening, you can do two things: instead, set the width of the navigator to 100%, and secondly, if you do not want it to change at all, you must give it min-width sum of all the widths of the elements a . Most likely you will also give it max-width if you are not using a responsive design. Here is the demo that I put together with your modified css: http://jsfiddle.net/c3HE6/

0
source

More articles:


All Articles