Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Navigation Bar with Left-Aligned and Right-Aligned Links using CSS
To create a navigation bar with left-aligned and right-aligned links with CSS, user should have a basic understanding of CSS flexbox. First, we will create the structure of navigation bar having five links using HTML, then we will use CSS to design the navigation bar and align the links on the left and right sides of the navigation bar, and apply flexbox properties to ensure proper positioning of links.
We are having a navigation menu containing five links, our task is to create a navigation bar with left-aligned and right-aligned links with CSS. In this article, we will be implementing following steps to create navigation bar with left-aligned and right-aligned links with CSS:
Creating Structure of Navigation Menu Using HTML
- We have used nav tag to define a navigation bar containing set of all the links.
- Then we have used two div elements to wrap the links created using anchor tag in two container to be positioned at left and right side in the navigation bar.
Here is the HTML implementation of above mentioned steps:
<body> <nav> <div class="left-links"> <a class="links selected" href="/https/www.tutorialspoint.com/index.htm" target="_blank">Home</a> <a class="links" href="/https/www.tutorialspoint.com/market/login.jsp" target="_blank"> Login</a> <a class="links" href="/https/www.tutorialspoint.com/market/index.asp" target="_blank"> Courses</a> </div> <div class="right-links"> <a class="links" href="/https/www.tutorialspoint.com/about/contact_us.htm" target="_blank"> Contact Us</a> <a class="links" href="/https/www.tutorialspoint.com/latest/certifications" target="_blank">Certification</a> </div> </nav> <h3> To create a navigation bar with left-aligned and right-aligned links with CSS </h3> <p>Click on the above links to explore our website <span>TutorialsPoint</span>. </p> </body>
Aligning the links Using CSS
- We have used nav class to design the navigation bar. We have used display property to apply flex layout, fixed the navigation bar at the top using CSS position and top property.
- Then we have set the dimension using CSS width which makes the navigation bar to use entire width and set appearence of navigation bar using background-color and color property.
- In the next step, we have used left-links class to set the flex-grow, flex-shrink and flex-basis property using flex shorthand notation. This sets the Home, Login and Register links to the left where initial length of the left flexible item is set to 200px.
- Then we have applied styles for all the links in links class where we have set its font-family, font-size, applied padding, removed underlining of links using text-decoration and center aligned using text-align property.
- At last, we have set the color of links upon hovering and text-color of span tag.
Here is the CSS implementation of above mentioned steps:
body {
margin: 0px;
margin-top:60px;
}
nav {
display: flex;
position: fixed;
top: 0;
width: 100%;
background-color: #031926;
color: white;
overflow: auto;
height: auto;
}
.left-links {
flex: 1 1 200px;
}
.links {
font-family: Verdana, sans-serif;
display: inline-block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
font-size: 15px;
}
.links:hover {
background-color: #04af2f;
}
span {
color: #04af2f;
}
Complete Example Code
Here is the complete example code to create a navigation bar with left-aligned and right-aligned links with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
margin: 0px;
margin-top:60px;
}
nav {
display: flex;
position: fixed;
top: 0;
width: 100%;
background-color: #031926;
color: white;
overflow: auto;
height: auto;
}
.left-links {
flex: 1 1 200px;
}
.links {
font-family: Verdana, sans-serif;
display: inline-block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
font-size: 15px;
}
.links:hover {
background-color: #04af2f;
}
span {
color: #04af2f;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links selected" href="/https/www.tutorialspoint.com/index.htm"
target="_blank">Home</a>
<a class="links" href="/https/www.tutorialspoint.com/market/login.jsp"
target="_blank"> Login</a>
<a class="links" href="/https/www.tutorialspoint.com/market/index.asp"
target="_blank"> Courses</a>
</div>
<div class="right-links">
<a class="links" href="/https/www.tutorialspoint.com/about/contact_us.htm"
target="_blank"> Contact Us</a>
<a class="links" href="/https/www.tutorialspoint.com/latest/certifications"
target="_blank">Certification</a>
</div>
</nav>
<h3>
To create a navigation bar with left-aligned and
right-aligned links with CSS
</h3>
<p>Click on the above links to explore our website
<span>TutorialsPoint</span>.
</p>
</body>
</html>
Conclusion
In this article, we learned and undesrstood how to create a navigation bar with left-aligned and right-aligned links using CSS. We used HTML to create the structure of navigation bar using nav, div and anchor tag and applied CSS flexbox properties for left and right alignment of the links. Flexbox makes the design to be responsive.
11K+ Views
