How to Create a Split Navigation Bar with CSS

A split navigation bar is a type of navigation bar where the links are divided into two sections, one on the left and the other on the right.

This type of navigation bar provides an organized and elegant look to your website and makes it easy for users to navigate through the pages.

In this tutorial, we will discuss how to create a split navigation bar with CSS.

HTML Markup

The HTML markup for a split navigation bar consists of a container div and an unordered list.

The container div will have two sections, one for the links on the left and the other for the links on the right.

The unordered list will contain the links.

<div class="navbar">
  <ul class="left-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="right-nav">
    <li><a href="#">Login</a></li>
    <li><a href="#">Sign Up</a></li>
  </ul>
</div>

CSS Styles

To create a split navigation bar, we need to add some styles to the HTML markup.

First, we will add a background color to the container div and set its height to 60px.

Then, we will set the display property of the unordered lists to inline-block and add some margin and padding to the links.

.navbar {
background-color: #333;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}

.left-nav, .right-nav {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
}

.left-nav li, .right-nav li {
display: inline-block;
margin-right: 20px;
}

.left-nav a, .right-nav a {
display: block;
padding: 20px;
color: #fff;
text-decoration: none;
}