Prevent wrapping of menu items

user_1534536 0
Viewed 67523

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>
css
6 Answers

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>

user_3062950

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

user_62231880
Related