How to Center a Navbar with CSS?

A navbar is a very important element of your website or application. It typically appears at the top of your application and helps visitors easily navigate to the main sections or pages of your app or website.

A navbar basically contains links to the main sections of your website. These links are generally referred to as nav items and based on your preference these nav items can be aligned to the left, center, or right.

Centering the Navbar

Centering the navbar can be easy and difficult at the same time depending on the HTML and CSS that you have already used to create it.

For example, if you haven’t used the float property over the nav items, applying the text-align: center; on the <nav> will automatically align the nav items to the center. But if you have already used the float property, applying text-align: center; on the <nav> will not center them.

Another solution that might work is the margin: auto;, but this only works if the navbar has a fixed width, which you should always avoid.

Keeping all these points in mind, I have found an effective solution that will work in all scenarios doesn’t matter what CSS you have already used. The solution is to use the Flexbox module of CSS.

The flexbox module is a flexible layout module in CSS that is used to create responsive webpages without using the float and position properties.

To center a navbar with CSS flexbox, you have to make it a flex container by applying display: flex; on it. You can then use the justify-content property to align the nav items to the left, center or the right.

Let’s say we have a navbar with the following HTML:

<nav class="topbar">
    <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Login</a></li>
    </ul>
</nav>

Now, you can add the following CSS for its design and center alignment.

The justify-content: center; pulls all the nav items to its center.

.topbar{
   background-color: #666;
   display: flex;  /* Make Flex container */
   justify-content: center; /* Center horizontally */
}
.topbar ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.topbar li{
   display: inline-block;
   float: left;
}
.topbar a{
   padding: 15px 20px;
   text-decoration: none;
   display: inline-block;
   color: white;
}
.topbar a:hover{
   background-color: rgba(0,0,0,0.7);
   color: white;
}
.active{
   background-color: #1ebba3;
}

Output:

Similarly, if you want to align the nav items to the right side, you can apply justify-content: right; or justify-content: flex-end; on the navbar.

This will pull all the nav items to the right side of the navbar.

See the following example:

.topbar{
   background-color: #666;
   display: flex;  /* Make Flex container */
   justify-content: right; /* Align to right */
}
.topbar ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.topbar li{
   display: inline-block;
   float: left;
}
.topbar a{
   padding: 15px 20px;
   text-decoration: none;
   display: inline-block;
   color: white;
}
.topbar a:hover{
   background-color: rgba(0,0,0,0.7);
   color: white;
}
.active{
   background-color: #1ebba3;
}

Output:

Live Example of a Centered Navbar

You can run the following example in our online code editor to see the live preview of the code.

.topbar{
   background-color: #666;
   display: flex;  /* Make Flex container */
   justify-content: center; /* Center horizontally */
}

Conclusion

In this article, we learned how we can center a navbar using CSS.

In summary, there can be different approach to center the navigation bar based on the structure of the navbar such as text-align: center;, margin: auto;, etc. However, these approach might not always work for you.

In such cases, you can use the flexbox module of CSS. The flexbox module lets you easily align the elements both horizontally as well as vertically.

To center a navbar with the flexbox, you have to first make it a flex conatainer by applying display: flex; on it and then you can use the justify-content property to align the nav items to the left, center or right.

To center align the nav items, you have to just set the justify-content property to center. That’s it.

Thanks for reading.