Home/ Questions/Q 9032125
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T07:54:11+00:00

Thanks in advance for your help. I have created a navigation bar using a

  • 0

Thanks in advance for your help. I have created a navigation bar using a list. I would like the words within that list to stay in the same position, but when the browser is resized smaller, the text wraps. You can refer to Jfiddle here. http://jsfiddle.net/kadeemlaurie/KGwWV/

This is the HTML

<div id="wrap">
 <div class="cntranav"> 
   <ul> 
       <li class="active"><a href="#">+Contrabang</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Events</a></li>
       <li><a href="#">Store</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>  
        <div class="clearFloat"></div>
    </ul>
 </div></div>

This is the css

body 
{ margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px}

.cntranav{
 font-family:Arial, 
 Helvetica, sans-serif;
 font-size:12px;font-weight:bold;}.

 cntranav ul{
list-style:none;
background:#2d2d2d;
background-image: none;
border-bottom: 1px solid #000;
height:40px;
padding:2px;}

.cntranav li{
display:block;
float:left;}

.cntranav li:
first-child{
margin-left:5px;}

.cntranav a{
display:block;
padding:10px;
text-decoration:none;
color:#bbbbbb;
border-top:2px solid transparent;}

.cntranav a:hover,
.cntranav li.active a{
font-weight:bold;
color:#fff;
border-top:0px solid #;}

.clearFloat{
clear:both;}

ul.ul.cntranav li {
float:left;
padding:7px 8px; }

ul.cntranav li.active{  
border-top: solid 0px #;
color:#fff;
font-weight:bold;}

ul.cntranav li:hover{
background:#383835;
cursor:pointer;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set a width on .cntranav (for instance, 800px). The browser is pushing list items from your horizontal nav bar down to a new row when you resize the browser or zoom in. It does this because it is trying to keep them visible in the viewport, no matter what size that is, without any overlapping. The rules around this are pretty technical (and I don’t know them all), but the short answer is that you need an absolute width specified on the nav container to prevent this from happening.

    • 0