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.

Approach:

• 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.

Example: Here we are using the above-explained method.

Output:

👁 Image

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.

Example: In this example, we are using the above-explained method. 

Output:

👁 Image

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 developer's choice.

Example: Here is the example of above explained method.

Output:

👁 Image