How to make navigation center

There are various ways you can represent your menu. Either you can align it left side or right side. But what if you want to make your navigation center. There are many situations where you need a centered navigation menu, which also supports responsive version, meaning no matter how big or small your screen size is your navigation stays visible.

To achieve the centered navigation lets assume you have following HTML structure.

<nav id="navigation">
    <ul>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
    </ul>
</nav>

Mostly the navigation structures are smae as shown above, Now to make it center, Just add the following css.

#navigation ul {
    text-align:center;
}
#navigation ul li {
    display:inline;
    list-style:none;
    position: relative;
}
#navigation ul li a {
    display:inline-block;
}

That’s it. You have a centered navigation now. If you are using bootstrap , then visit this article of how to make bootstrap centered navigation.

Advertisements