Center navigation bar

Question

I'm trying to center my nav bar.

HTML is

<nav>
    <ul>
        <li><a href="../help.html">HJEM</a></li>
        <li><a href="instructions.html">FORUM</a></li>
        <li><a href="instructions.html">DONER</a></li>
        <li style="margin-right: 0px;"><a href="legal.html">SERVERE</a>
        <li style="margin-right: 0px;"><a href="legal.html">FAQ</a></li>
        <li style="margin-right: 0px;"><a href="legal.html">KONTAKT</a></li>
    </ul>
</nav>

CSS is

nav {margin: 3px 0; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none;}
nav ul li a {
    background: #FFFFFF;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #717171;
    text-decoration: none;
    float: left;
    padding: 8px 0;
    width: 106px;
    margin: 0px 10px 0 0;
}
nav ul li a:hover {background: #f1f1f1;}

Right now it floats from left to right. I want to center it.

Bonus question; if someone know this, if you can point me in the direction on how to create a touch compatible sub menu for "doner".

Thanks for your time. hjortefjellet.com

Aloso · Answer 1 · 2014-03-08T15:57:03.473

1

If you want the elements to be in a line, I would use li { display:inline-block; }

then yo can define for your nav element: margin: 3px auto;.

Did I understand you right that you want a dropdown menu for the items in the nav? That's not too difficult: Add the dropdown menu as a div element into the li element:

<li>
  <a href="../help.html">HJEM</a>
  <div class="dropdown">Hello!<br />I'm a dropdown menu!</div>
</li>

Then add to the stylesheet:

.dropdown {
  display:none;
  position:absolute;
  top:56px;
  background-color:#f1f1f1;
  width:200px;
  padding:10px;
}

li:hover .dropdown, .dropdown:hover { display:block; }

edited Mar 08 '14 at 15:57

answered Mar 08 '14 at 01:01

Aloso

5,123
4
24
41

You will need a little bit more, including changing the markup to get this working ;) – Tomas Ramirez Sarduy Mar 08 '14 at 08:48
I'm sorry, but I don't understand why. I've tested it, and as soon as I changed "margin: 3px 0;" to "margin:3px auto;", it worked well. Does at least the dropdown menu work? – Aloso Mar 11 '14 at 17:14

score 0 · Answer 2 · answered Mar 08 '14 at 00:46

0

Just do this

nav {
   margin: 3px auto;
}

answered Mar 08 '14 at 00:46

CRABOLO

8,605
39
41
68

Didn't seem to work. Here is the webpage so you can fickle with the code. http://hjortefjellet.com/ – user3394828 Mar 08 '14 at 01:12

score 0 · Answer 3 · answered Mar 08 '14 at 07:58

first of all, close your 4th "li" tag. Also, add "margin:0 auto;" to "nav ul" and remove inline styles.

code should look like this:

HTML

<nav>
  <ul>
    <li><a href="../help.html">HJEM</a></li>
    <li><a href="instructions.html">FORUM</a></li>
    <li><a href="instructions.html">DONER</a></li>
    <li><a href="legal.html">SERVERE</a></li>
    <li><a href="legal.html">FAQ</a></li>
    <li><a href="legal.html">KONTAKT</a></li>
 </ul>
</nav>

And CSS

nav {margin: 3px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; margin:0 auto; display:block;}
nav ul li a {
background: none repeat scroll 0% 0% #FFF;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0px;
width: 106px;
}

nav ul li a:hover {background: #f1f1f1;}

http://jsfiddle.net/Sb42u/1/

Didn't work, still not centered. You jsfiddle is different from the code you posted so I mixed them. — user3394828, Mar 08 '14 at 09:47

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

1. To center your nav bar:

You just need to change margin: 3px 0; to margin: 3px auto in nav.

2. To create a DropDown menu:

First I would advise to change your markup this way:

<nav>
    <ul>
       <li><a href="../help.html">HJEM</a></li>
       <li><a href="instructions.html">FORUM</a></li>
       <li>
             <a href="instructions.html">DONER</a>
             <ul class="submenu">
                <li><a href="legal.html">SERVERE</a>
                <li><a href="legal.html">FAQ</a></li>
                <li><a href="legal.html">KONTAKT</a></li>
             </ul>
       </li>
    </ul>
  </nav>

Then you can simulate a dropdown using this css classes:

nav ul li{ 
   position:relative; 
   float:left;
}

nav ul li ul.submenu {
    position: absolute;
    width: auto;
    display:none;
    top: 35px;
}
nav ul > li:hover > ul {
    left: 0;
    display: block;
}

Fiddle here: http://jsfiddle.net/9Yg47/4/

@user3394828: Still centered? You wanted the nav centered right? Did you check the Fiddle? — Tomas Ramirez Sarduy, Mar 10 '14 at 06:35
Yes I meant that it's still not centered. I ditched the sub menu idea and your code didn't work, still not centered. — user3394828, Mar 14 '14 at 22:34

Center navigation bar

4 Answers4

1. To center your nav bar:

2. To create a DropDown menu:

Linked