Hey everyone, in this short tutorial I'm gonna show you how to create 3 common navbar layouts using HTML, CSS and Flexbox.
Lets get right into it!
The First Navbar
This is the first navbar we will be building. It is a very common layout used by many websites out there. It has the brand name on the left side and the navigation links on the right side.
The Markup
The HTML markup for this navbar is fairly straight forward:
<nav class="navbar">
<h2 class="nav-brand">My Website</h2>
<ul class="nav-links">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</nav>
We have a nav element wrapping all of the content with a class of navbar. We then have a h2 which contains the website's title/brand. We then have an unordered list with a li for each navigation link that includes an a tag.
The Styling
To style this navbar, we will first need some basic styling for the content within. This includes changing the color of the content to match the purple background and displaying the links horizontally:
.nav-links {
display: flex;
list-style: none;
}
.nav-item:not(:first-of-type) {
margin-left: 1.5em;
}
.nav-link {
color: #fff;
text-decoration: none;
font-weight: 500;
}
We can now add some styling to the navbar to change its size, colors and spacing:
.navbar {
width: 100vw;
height: 7.5vh;
background: #855FF6;
color: #fff;
padding: 0 5vw;
}
Obviously, the height, colors and padding can be adjusted for this navbar to suit your circumstances.
Now let's use flexbox to align the content:
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
A quick explanation of the above:
display: flex - sets the display of the navbar to flex so the items will now be displayed in a row instead of on top of each other.
align-items: center - aligns the items (h2 and ul) to the center vertically. This means whatever the height of the navbar is, the content will be in the center.
justify-content: space-between - puts space between the items so the h2 will stay to the left and the ul will be positioned on the far right.
The Second Navbar
The second navbar is another reasonably common layout. It has got the title/brand on the left side, the links in the middle and button on the right side.
The Markup
The markup is very similar to the previous navbar with the addition of the button after the .nav-links list:
<nav class="navbar">
<h2 class="nav-brand">My Website</h2>
<ul class="nav-links">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<button class="nav-btn">Create Account</button>
</nav>
The Styling
Interestingly, the exact same styling used in the previous navbar will make this navbar layout. The reason why is because justify-content: space-between; with three children instead of two children positions the middle child element (in this case, the links) in the center with the adjacent elements on the far left (the h2) and far right (the button).
You will however need to add styling to the button:
.nav-btn {
height: fit-content;
padding: 1em 1.5em;
background-color: transparent;
border: 1px solid #fff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
Now, lets move on to the final navbar layout
The Third Navbar
The third and final layout we will be creating is a simple navbar with the links in the middle and no brand nor button.
The Markup
The markup is quite simple yet again:
<nav class="navbar">
<ul class="nav-links">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</nav>
Same markup without the h2 or button.
The Styling
The styling is the same again however set justify-content to center rather than space-between. This will align the links to the center of the navbar horizontally.
Take Away
Today, I've shown you how to create 3 different common navbar layouts. I hope you've learned something useful and can start using these layouts in your websites.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
GitHub: Blake-K-Yeboah
LinkedIn: Blake Yeboah
Twitter: Blake Yeboah
You can also show your support by buying me a coffee 😃
