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.