CODEWITHSUNDEEP
htmlcss
Rick
Rick

Reputation: 21

Center a horizontal navigation bar?

How can i center this nav bar so it stays in the center of the screen despite the users resolution setting? Also how to stop the dropdown menu on 'Portfolio' stretching the menu?

http://jsfiddle.net/y4vDC/382/

<ul id="menu">
<li><a href="#">Home</a></li>
<li>
    <a href="#">About</a>
    <ul class="hidden">
        <li><a href="#">Who We Are</a></li>
        <li><a href="#">What We Do</a></li>
    </ul>
</li>

some of the html....

Upvotes: 1

Views: 37

Answers (3)

Paulie_D
Paulie_D

Reputation: 115047

This should get you started. The important thing is that floating makes centering items quite difficult.

display:inline-block works much better as you can center thme list items by applying text-align:center to the parent ul.

Then it's just a case of using positioning to set the location and size of the submenu.

/*Strip the ul of padding and styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* center contents of menu */
  text-align: center;
}
/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  vertical-align: top;
  margin-right: 1px;
  /* create positioning context */
  position: relative;
}
/*Style for menu links*/

li a {
  display: block;
  min-width: 140px;
  /* removed set height */
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: helvetica, arial, sans-serif;
  color: #ffffff;
  background: #6BD6FA;
  text-decoration: none;
}
/*Hover state for top level links*/

li:hover a {
  background: #A0A2A3;
  color: #ffffff;
}
/*Hover state for dropdown links*/

li ul a:hover {
  background: #bada55;
  color: #ffffff;
}
/*Hide dropdown menu until are needed*/

li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  height: auto;
}
/*Show  dropdown menu on hover */

li:hover ul {
  display: block;
}
/*Make dropdown links vertical*/

li ul li {
  display: block;
}
<ul id="menu">
  <li><a href="#">Home</a>
  </li>
  <li>	<a href="#">About</a>
    <ul class="hidden">
      <li><a href="#">Who We Are</a>
      </li>
      <li><a href="#">What We Do</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a>

    <ul class="hidden">
      <li><a href="#">Web & User Interface Design</a>
      </li>
    </ul>
  </li>
  <li><a href="#">News</a>
  </li>
  <li><a href="#">Contacts</a>
  </li>
</ul>

Upvotes: 2

Jesse
Jesse

Reputation: 1262

try this 

ul {
 list-style-type: none;
 margin: 0 auto;
 width:80%;
 padding:0;
}

Upvotes: 0

Jianov
Jianov

Reputation: 41

/*Strip the ul of padding and styling*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:center;
}

/*Create a horizontal list with spacing*/
li {
    display: inline-block;
    margin-right: 0px;
}
ul#menu > li{
    position:relative;
}
ul > li  > ul{
    position:absolute;
}
ul > li  > ul li{
    white-space:nowrap;
}

/*Style for menu links*/
li a {
    display: block;
    padding:25px 50px;
    line-height: 50px;
    text-align: center;
    font-family: helvetica, arial, sans-serif;
    color: #ffffff;
    background: #6BD6FA;
    text-decoration: none;
}

/*Hover state for top level links*/
li:hover a{
    background: #A0A2A3;
    color: #ffffff;
}

/*Style for dropdown links*/
li:hover a {
    background: #A0A2A3;
    color: #ffffff;
    height: 50px;
    line-height: 50px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #A0A2A3;
    color: #ffffff;
}

/*Hide dropdown links until they are needed*/
li ul  {
    display: none;
}

/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
li ul li a {
    width: auto;
}

/*Display dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

I updated jsfiddle too: http://jsfiddle.net/y4vDC/385/

Upvotes: 0

Related Questions