39

I created a horizontal navigation (menu) bar for my site. When I re-size my window to a size smaller than that of the bar, the menu items get wrapped. I want the menu to remain intact (that is, it should remain horizontal) irrespective of the size of window as it usually can be seen in sites such as Google. I tried various ways posted on various forums including this one but nothing worked for me. Below I have pasted my CSS code for the menu.

CSS CODE:

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); }


#cssmenu > ul > li {
    float: left; 
    margin-left: 30px;
    position: relative;

}

#cssmenu > ul > li > a {
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;

}

#cssmenu > ul > li > a:hover {color: #00FF00; }
body.home li.home, body.tech li.tech {font-weight:bold; }

#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: #FFFFFF;
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}

#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}

#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}


#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}

HTML Code:

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="styles.css" rel="stylesheet" type="text/css">
 <title>Home</title>
</head>
<body class="home" background="teenscorner1.jpg" text="#FFFFFF" style="background-attachment: fixed">
 <div id='cssmenu'>
  <ul>
   <li class="home"><a href='home.jsp'><span>Home</span></a></li>
   <li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>
   <li><a href='#'><span>Fun</span></a></li> 
   <li><a href="#"><span>Deals</span></a></li>
   <li><a href="#"><span>Wheelz</span></a></li>
   <li><a href='#'><span>About</span></a></li>
  </ul>
 </div>
</body>
0

6 Answers 6

76

When you don't know the width because the links can differ in width you could use display: inline-block on the list item <li> and white-space:nowrap on the list itself <ul>

http://jsfiddle.net/Frd8J/

12
  • 1
    be aware of the space between the items! you can remove the space by putting de li open tag against the closing tag. < /li >< li >
    – Gijs
    Commented Jul 18, 2012 at 11:52
  • .I want that the menu should remain intact(that is, it shud remain horizontal) irrespective of the size of window as it usually can be seen in sites such as Google. Commented Jul 18, 2012 at 11:56
  • I mean to say dat when i resize the window, the menu items get shifted to next lines. I don't want this to happen. I want dat menu items shud remain where they were like when window was maximized. Commented Jul 18, 2012 at 12:04
  • I don't understand. The solution that @Gijs has provided works just fine for me and it's more flexible than mine.
    – Ana
    Commented Jul 18, 2012 at 12:06
  • Gijs, its not working for me. I pasted css of what you did. My problem still persists. Commented Jul 18, 2012 at 12:23
5

You should set a min-width for #cssmenu > ul, one that allows all your menu items to fit.

5
  • It should work, but I cannot tell why it doesn't in your case until I see the HTML.
    – Ana
    Commented Jul 18, 2012 at 11:48
  • ya it worked for u.. bt its not working for me.. i changed my css like u did.. bt d problem still persists. Commented Jul 18, 2012 at 12:11
  • Could you give us a link to the live site as well?
    – Ana
    Commented Jul 18, 2012 at 12:25
  • live site has not been developed fully yet. So, link to it can't be made available. Sorry. Commented Jul 18, 2012 at 12:29
  • does it have anything to do with viewing in offline mode and the one after uploading the site to some server? Commented Jul 18, 2012 at 12:38
3

The accepted answer did not work in my case but @Ana original answer did. I tried to add this as a comment to her answer but it would not fit. Putting a min-width on the UL as suggested, brought all of the LI items back to one line as desired, but that line extended to the right of the containing div. I added the same min-width to the parent div and I got what I wanted, all of the LI on one line within the container. As a final step, I removed the min-width from the UL (so this is a different, more general answer than Ana's) and everything still worked. In a nut shell if you make the UL nowrap in css as documented in the accepted answer and it wraps anyway, then make sure you give the list enough width so that it does not need to wrap. Another way to increase the width that also works (without using min-width) is to increase the width of the content area below the UL in the containing div. My case was a tabbed DIV, the LIs were the tabs on top. Each tab had content below it. When the content below was wide enough already the LIs stayed in one row. I could have put a min width on every tab content, but for me it worked better to put it once on the outside container. HTH.

0

im assuming these are you nav bar items

<li class="home"><a href='home.jsp'><span>Home</span></a></li>
<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>
<li><a href='#'><span>Fun</span></a></li> 
<li><a href="#"><span>Deals</span></a></li>
<li><a href="#"><span>Wheelz</span></a></li>
<li><a href='#'><span>About</span></a></li>

if you just put them like this

<li class="home"><a href='home.jsp'><span>Home</span></a></li>&nbsp;<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>&nbsp;<li><a href='#'><span>Fun</span></a></li>&nbsp;<li><a href="#"><span>Deals</span></a></li>&nbsp;<li><a href="#"><span>Wheelz</span></a></li>&nbsp;<li><a href='#'><span>About</span></a></li>

thats all you have to do is join them all together with no spaces between the li end and start tags, now that would display them all in line with no spaces visually between your nav items on your loaded page, so you might not want them all to be visually joined like its one bar, so iv also put a code for a space in between the li end and start tags, this will give you a single space between all nav tags visually on your loaded screen but they will still stay tied together so that wont go staking up if you make screen narrow.

0

I am having the same problem with my menu items wrapping to the next line. It took a few changes. First, I had to set the <ul> to have a max-height and overflow set to hidden. Then I just had to set a width to the parent container.

In my case, since the design is responsive and the area available changes (since the menu is flanked on both sides by elements with preset hard widths) I had to expand the area given as it grows.

#primary-menu {
  display: none;
}

@media screen and (min-width: 59em) {
  #primary-menu {
    display: inline-block;
    width: 74%;
  }
}

@media screen and (min-width: 64em) {
  #primary-menu {
    width: 78%;
  }
}

@media screen and (min-width: 78.75em) {
  #primary-menu {
    width: 83%;
  }
}

ul {
  max-height: 53px;
  overflow: hidden;
}
<div id="primary-menu" class="menu">
  <ul class="menu menu__navigation--primary">
    <li class="first leaf active-trail">
      <a href="/equipment" class="active-trail active">Equipment</a>
    </li>
    <li class="leaf">
      <a href="/solutions">Solutions</a>
    </li>
    <li class="leaf">
      <a href="/services">Services</a>
    </li>
    <li class="leaf">
      <a href="/locations">Locations</a>
    </li>
    <li class="leaf">
      <a href="/our-company">Our Company</a>
    </li>
    <li class="last leaf">
      <a href="/contact-us">Contact Us</a>
    </li>
  </ul>
</div>

-1

You should give "display:flex" to "ul" tag

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.