CSS Navigation Bar
The CSS Navigation Bar is the combination of Lists and Links.
How to start creating Navigation bars
Step1 : Create an unordered list like below –
Step2 : Add links to the list items using <a> tag so that the list items becomes clickable.
Step3 : Remove the style from the list which makes it look like a bullet list.
Note: You can also use list-style-type:none as well.
Step4 : You can set other style related properties on the list items based on what you want like –
- Float properties like float:left
- Background color of the link list
- Margin, Padding properties – You might require to set Margin and Padding values as 0 if required
- Width & Height related properties
- text-decoration:none is often used to remove the underline from the link
- overflow:hidden is often used to stop the list items to go beyond the list boundary
- text-align property etc
1.You can use <li> inside an <a> tag –
2.OR, You can also use <a> tag inside <li> tag.
but, you need to keep in mind that if you use the 2nd format, you should use-
so that the whole link area will be clickable.
Example of creating Navigation bars
Horizontal navigation bar
The Horizontal Navigation Bar is also referred to as “Horizontal Nav Bar”. Basically, it is the Navigation Bar which is in horizontal direction along X-Axis.
There are 3 ways to create Horizontal Navigation bars –
- Making list items as Float without using the display as block.
- Making list items as Float with display as block.
- Using list items as inline.
We have already shown a simple way to create Horizontal Navigation Bar without display as block(option 1)
Let us see how to create Horizontal Navigation bar using option 2 and 3.
Horizontal Navigation using Float & display as block
The float property is often used with display:block property so that the elements fits side by side horizontally and width and height property can be set easily.
Example of Horizontal Navigation using Float & display as block
Horizontal Navigation using display as Inline
If you create Horizontal Nav Bar using display as Inline then you will not be able to apply the width and height properties.
Inline Display does not have any effect on width & height properties.
Horizontal Navigation bars by creating dividers
You can create dividers between menus. Let us see how-
More Example Horizontal Navigation bars
Vertical Navigation Bar
Explanation of the random topic is here
Vertical Navigation Bar with Active Link
Explanation of the random topic is here
More Example Vertical Navigation bars
Navigation Bar with Logo
Most of the modern websites have logo at either –
- Top-left corner
- Top-right corner
You can use properties like-
- line-height property- Set the line-height of the menu items.
- float property: You can code float:left to float the logo to the Top-left corner, float:right to float the logo to the Top-right corner.
Below is an example of Navigation Bar with Logo & the Navigation Bar is at the center.
Fixed Navigation Bar
In this example, we are going to show you how you can create a fixed navigation Bar. This means, we are going to freeze the navigation bar at one place even when the user scrolls the Web page.
- Use position:fixed for unordered list(ul)
- Remove the style from the list using list-style-type:none
- Use display: block for anchors
Example for Fixed Navigation Bar
Sidebar navigation menu
The above example is also an example of a Sidebar Navigation Menu.
If you remove display: block, the navigation bar will not have a full height but an automatic height.
You can add overflow-x:auto to add a horizontal scroll which will only appear in case of overflow else you can also add overflow-x:hidden to hide the horizontal scrolling.
Example for sidebar navigation menu
Drop down Navigation Menu
The justify-content: space-between aligns the Flex Items along the main axis in such a way that each 2 successive items have equal spaces in between them. This means that there is no extra space before the 1st Flex items and after the last Flex items.
- Hide the Menu items at start by hiding the unordered list inside the main menus by using –
- Display the items inside each menu vertically and the position of each element must be relative to other elements. Code like this –
- Do not float the list to left or right. Add the float: none
Example of Drop down Navigation Menu
Responsive Navigation Bar
It is important to create a Navigation bar which looks good in all device sizes by making it responsive.
The best way to make the navigation bars responsive is by using Media Queries