How to create a split navigation bar using CSS ?
Last Updated :
29 Dec, 2023
The article will demonstrate how to create a split navigation bar using CSS. There are two ways to make the split navigation bar these are with the help of flexbox properties and CSS position property. A split navigation bar is a popular layout where navigation links are divided into two sections. It is used to achieve a balanced look for the navbar.
Syntax
// Syntax forFlexbox and space-between
.class{
display: flex;
}
// Syntax for CSS Position Property
.class{
position: absolute;
right: 20px;
}
Using Flexbox and space-between
Using Flexbox with ‘ justify-content: space-between ‘ aligns items with maximum space between them, pushing the first item to the start and the last item to the end of the container. This creates a layout where space is distributed evenly, providing a clean and organized appearance to the elements.
Approach
- Create the structure of the navbar in HTML using different types of the elements including <div>, <ul>, <li>, and button.
- There are two unordered list defined where the first have three list items and the second have only one list item.
- Cretae a external stylesheet and link to the index.html file for defining the style to the navbar.
- Use property display flex and justify-content space between to split navigation bar.
Example 1: The example shows split navigation bar using CSS with various flexbox properties.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Navbar</title>
<link rel="stylesheet"
href="index.css">
<link rel="stylesheet" href=
</head>
<body>
<div class="box">
<div class="nav_list_box">
<div class="navlistleft">
<ul>
<li>
<a href="#">
<i class="fa fa-solid fa-house">
</i>
Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-solid fa-address-card">
</i>
About
</a>
</li>
<li>
<a href="#">
<i class="fa fa-solid fa-address-book">
</i>
Contact Us
</a>
</ul>
</div>
<div class="navlistright">
<ul>
<li>
<a href="#">
<i class="fa fa-solid fa-book">
</i>
Courses
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
background-color: rgb(111, 201, 108);
font-family: 'Poppins', sans-serif;
}
.nav_list_box {
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
}
ul {
list-style: none;
}
.navlistleft ul {
display: flex;
align-items: center;
gap: 20px;
margin-left: 20px;
}
li {
font-size: 20px;
}
.navlistright ul {
margin-right: 20px;
}
li {
transition: .2s linear;
}
li:hover {
color: rgb(9, 21, 4);
transform: translateY(-3px);
}
a {
text-decoration: none;
color: rgb(23, 64, 7);
}
a:hover {
color: rgb(9, 21, 4);
font-weight: 700;
}
@media only screen and (max-width: 513px) {
li {
font-size: 15px;
}
}
@media only screen and (max-width: 424px) {
li {
font-size: 10px;
}
}
|
Output:
Output
Using CSS Position Property
The CSS ‘ position: absolute’ property allows an element to be positioned relative to its nearest positioned ancestor or the initial containing block. Elements with `position: absolute` are positioned based on their nearest positioned ancestor, creating layouts with more control over element placement.
Approach
- Create the structure of the navbar in HTML using different types of the elements including <div>, <ul>, <li>, and button. There is unordered list defined where four list items are defined.
- Cretae a external stylesheet and link to the index.html file for defining the style to the navbar.
- Style the list item and set the position property to absolute and right to 20px. It will give the effect of split navigation bar.
- Use fontawsome icons and different CSS properties to style the navbar.
Example 2: The example shows split navigation bar using CSS with position property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
</head>
<body>
<div class="box">
<div class="navlist">
<ul>
<li>
<a href="#">
<i class="fa fa-solid fa-house"></i>
Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-solid fa-address-card"></i>
About
</a>
</li>
<li>
<a href="#">
<i class="fa fa-solid fa-address-book"></i>
Contact Us
</a>
</li>
<li class="split">
<a href="#">
<i class="fa fa-solid fa-book"></i>
Courses
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
|
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
background-color: rgb(187, 121, 189);
font-family: 'Poppins', sans-serif;
}
ul {
list-style: none;
}
.navlist ul {
display: flex;
align-items: center;
gap: 20px;
margin-left: 20px;
height: 10vh;
}
li {
font-size: 20px;
transition: .2s linear;
}
li:hover {
transform: translateX(3px);
}
a {
text-decoration: none;
color: rgb(89, 10, 94);
}
a:hover {
color: rgb(68, 16, 67);
font-weight: 700;
}
.split {
position: absolute;
right: 20px;
}
@media only screen and (max-width: 513px) {
li {
font-size: 15px;
}
}
@media only screen and (max-width: 424px) {
li {
font-size: 10px;
}
}
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...