CODEWITHSUNDEEP
javascripthtmlcss
user3015221
user3015221

Reputation: 125

Centering a Nav Bar

I have a site, coolmath3.org (on weebly), and wanted to center the nav bar. I tried but it wasnt working.

HTML: Here is the nav bar

<div id="nav-wrap">
    <div class="container">
        <ul class="wsite-menu-default">
            <li class="wsite-nav-0" style="position: relative;" id="active"><a style="position: relative;" href="/">Home</a>

            </li>
            <li class="wsite-nav-1" style="position: relative;" id="pg340443743893615061"><a style="position: relative;" href="/about.html">About</a>

            </li>
            <li class="wsite-nav-2" style="position: relative;" id="pg867313554258978042"><a style="position: relative;" href="/suggestions.html">Suggestions</a>

            </li>
        </ul>
    </div>
    <!-- end container -->
</div>

CSS: 

#nav-wrap .nav {
    float:left;
}
#nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
    background:url(saperator-h.png) repeat-x bottom;
    padding-bottom:40px;
}
#nav-wrap .container ul {
    list-style: none;
}
#nav-wrap .container ul li {
    list-style: none;
    float: left;
    background:url(nav-saperator.png) no-repeat right center;
    margin-right: 10px;
    padding-right: 25px;
}
#nav-wrap .container ul > li:last-child,
#nav-wrap .container ul span:last-child li {
    background:none;
}
#nav-wrap .container ul li a {
    display: block;
    line-height:14px;
    border: 0;
    outline: 0;
    list-style-type: none;
    text-transform:uppercase;
    padding:5px;
    margin-bottom:4px;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
    color:#000;
}

Here is a jsfiddle

Upvotes: 0

Views: 326

Answers (3)

DaniP
DaniP

Reputation: 38252

You need this in your CSS:

#nav-wrap .container .wsite-menu-default {
   display:table;
   margin:auto;
}

Here is your fiddle working http://jsfiddle.net/58sqQ/2/

Upvotes: 0

Shawn G.
Shawn G.

Reputation: 622

I would replace the float:left; from the #nav-wrp .container ul li with display:inline-block;

Then I would add text-align:center; to #nav-wrap .container ul

Here is a working example you can use, I used the same css and html provided

http://jsfiddle.net/jdW5m/

These were the only changes made

#nav-wrap .container ul {
    list-style: none;
    text-align:center; /* added */
}
#nav-wrap .container ul li {
    list-style: none;

    /* Removed float: left; */

    display:inline-block; /* added */
    background:url(nav-saperator.png) no-repeat right center;
    margin-right: 10px;
    padding-right: 25px;
}

For more information on how float works you can check out the MDN article

Upvotes: 1

Zyad Sherif
Zyad Sherif

Reputation: 929

You should have searched a little bit on this but anyways the solution is fairly simple.

#nav-wrap .container ul {
  list-style: none;
  display:block;
  overflow: hidden;
  text-align: center;
}

#nav-wrap .container ul li {
  list-style: none;
  display: inline-block;
  background:url(nav-saperator.png) no-repeat right center;
  margin-right: 10px;
  padding-right: 25px;
}

Enjoy

Upvotes: 0

Related Questions