Creating a Navigation Bar with three Different Alignments using CSS
In this article, we are going to create a navigation bar with three different positions i.e left, right and Centre. To understand this article we need to understand some basic HTML and CSS.
- Here we are going to make a navigation bar for EBook websites.
- The tags we are going to use for the Navigation bar is header, image, nav, button. Here we’re going to target each tag individually.
- Here we are going to try 3 different positions for the navigation bar i.e left, right, and Centre.
- After writing HTML, we will focus on CSS, or we will use a style tag on HTML to make the website Navbar attractive.
1. Left Aligned Navigation Bar: In the left positioned navigation bar, all list of links is on the right side i.e. left aligned and the image is on the left side which is right-aligned.
2. Centre Aligned Navigation Bar: In the Centre-aligned navigation bar, all the links are at the Centre, the logo is right-aligned and the button is left aligned all these things can be done only from one line of code.
3. Right Aligned Navigation Bar: In the right-aligned navigation bar, the navigation links are rights aligned, and all other links like button and logo depend on the developers choice.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.