Prevent wrapping of menu items

Question

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 rem

Answer 1

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.

Answer 2

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>

Answer 3

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/

Answer 4

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.

Answer 5

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

Answer 6

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