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 –
<ul> <li>Home</li> <li>About Us</li> <li>Community</li> <li>Careers</li> </ul>
Step2 : Add links to the list items using <a> tag so that the list items becomes clickable.
<ul id="#ul-nb"> <a href="#"><li>Home</li></a> <a href="#"><li>About Us</li></a> <a href="#"><li>Community</li></a> <a href="#"><li>Careers</li></a> </ul>
Step3 : Remove the style from the list which makes it look like a bullet list.
#ul-nb { list-style: none; }
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
Note/Info:
1.You can use <li> inside an <a> tag –
For Example:
<ul id="#ul-nb"> <a href="#"><li>Home</li></a> <a href="#"><li>About Us</li></a> <a href="#"><li>Community</li></a> <a href="#"><li>Careers</li></a> </ul>
2.OR, You can also use <a> tag inside <li> tag.
For Example:
<ul id="ul-nb"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Community</a></li> <li><a href="#">Careers</a></li> </ul>
but, you need to keep in mind that if you use the 2nd format, you should use-
display:block;
so that the whole link area will be clickable.
Example of creating Navigation bars
#ul-nb { list-style: none; margin:2px; padding:3px; } #ul-nb li { float:left; padding:10px; background:orange; text-align: center; margin-left:5px; } #ul-nb li:hover { background:red; opacity:0.8; color:white; }
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
#ul-nb { list-style: none; overflow:hidden; background:red; margin:0; padding:0; } #ul-nb li a { text-align:center; padding:10px; width:80px; } #ul-nb li { float:left; } #ul-nb li:hover { background:brown; } a { display: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.
Example
#ul-nb { list-style: none; } #ul-nb li { display:inline; padding:10px; background:blue; color:white; text-align: center; margin-left:5px; } #ul-nb li:hover { background:red; color:yellow; }
Example
.navigation-menu ul { padding: 0px; margin: 0px; } ul { padding: 0; overflow: hidden; background-color: skyblue; } li { float: left; } li a { display: inline-block; color: black; text-align: center; padding: 10px 20px; text-decoration: none; } li a:hover { background-color: slateblue; } #navigation ul { font-size: 1.4em; } #navigation ul li { display: inline; color:white; } #navigation li:not(:first-child):before { content: " | "; }
More Example Horizontal Navigation bars
Example
.navigation-menu ul { padding: 0px; margin: 0px; } ul { padding: 0; overflow: hidden; background-color: black; } li { float: left; list-style-type:none; } li a { display: inline-block; color: white; text-align: center; padding: 10px 20px; text-decoration: none; } li a:hover { background-color:crimson; } #navigation ul { font-size: 1.5em; }
Example
#ul-nb { list-style: none; overflow:hidden; background:aqua; margin:0; padding:0; width:100px; } #ul-nb li a { padding-bottom:5px; width:80px; } #ul-nb li:hover { background:brown; } a { display:block; }
Vertical Navigation Bar with Active Link
Explanation of the random topic is here
Example
body { margin:0; padding:0; } #ul-nb { list-style: none; border:2px solid blue; border-radius:5px; overflow:hidden; background:lightgray; margin:0; padding:0; width:150px; } #ul-nb li a { text-align:left; text-decoration:none; padding:10px; } #ul-nb li:hover { background:brown; } a { display:block; } .active-link { background:grey; }
More Example Vertical Navigation bars
Example
.navigation-menu ul { padding: 0px; margin: 0px; } ul { padding: 0; overflow: hidden; background-color: black; } li { list-style-type:none; } li a { display: block; color: white; text-align: left; padding: 10px 20px; text-decoration: none; } li a:hover { background-color:crimson; } #navigation ul { font-size: 1.5em; }
Navigation Bar with Logo
Most of the modern websites have logo at either –
- Top-left corner
- Top-center
- 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.
Example
.nav-bar { background-color: lightgray; height: 56px; width: 100%; text-align:center; } .nav-bar img{ float:left; } .nav-bar ul { padding: 0; margin: 0; } .nav-bar li { list-style: none; padding: 0; display: inline-block; } .nav-bar li a { text-decoration: none; adding: 15px; olor: #e25822; line-height: 55px; } #nav-container { width: 100%; margin: 0; adding: 0; } body { margin: 0; padding: 0; }
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.
Tips:
- 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
.fix-navigation-menu ul { padding: 0px; margin: 0px; font-size: 1.5em; } ul { position: fixed; background-color: black; } li { list-style-type:none; } li a { display: block; color: white; text-align: left; padding: 10px 20px; text-decoration: none; } li a:hover { background-color:crimson; } .textalignval { float: left; padding: 1px 200px; width: 60%; height: 300px; }
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
.fix-navigation-menu ul { padding: 0px; margin: 0px; font-size: 1.5em; } ul { position: fixed; /*Fix the position even on scroll */ background-color: black; } li { list-style-type:none; /* Remove to style type*/ } li a { color: white; text-align: left; padding: 2px; text-decoration: none; /* Remove to see output*/ } li a:hover { background-color:crimson; } .textalignval { float: left; /* No effect if display:block*/ padding: 1px 200px; width: 60%; height: 300px; }
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.
Tips:
- Hide the Menu items at start by hiding the unordered list inside the main menus by using –
li ul { display: none; }
- Display the items inside each menu vertically and the position of each element must be relative to other elements. Code like this –
li:hover ul { display: block; position: absolute; }
- Do not float the list to left or right. Add the float: none
Example of Drop down Navigation Menu
ul { list-style: none; padding: 2px; } ul li { display: block; float: left; } li ul { display: none; } ul li a { display: block; background-color:#0076B9; padding: 10px; text-decoration: none; color: white; width:100px; border: 1px solid red; } ul li a:hover { background-color:#0076B9; color:white; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; } li:hover a { background-color:#94C548; color:black; } li:hover li a:hover { background: black; width:100px; }
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
Example of Responsive Navigation Bar
* { box-sizing: border-box; } body { margin: 0px; font-family: 'georgia'; } .responsive-navbar { width: 100%; height: 50px; background-color: #117DA9; position: relative; } .responsive-navbar .res-menu { display: inline-block; } .responsive-navbar > .res-menu > .navvalue { display: inline-block; font-size: 22px; color: Gold; padding: 15px; } .responsive-navbar > .res-navbtn { display: none; } .responsive-navbar > .resnavbar-links { display: inline; float: right; font-size: 18px; } .responsive-navbar > .resnavbar-links > a { display: inline-block; padding: 13px 10px 13px 25px; text-decoration: none; color:White; font-size:22px } .responsive-navbar > .resnavbar-links > a:hover { background-color: gold; color:black; } .responsive-navbar > #resnavbar-type { display: none; } @media all and (max-width:650px) { .responsive-navbar > .res-navbtn { display: inline-block; position: absolute; right: 0px; top: 0px; } .responsive-navbar > .res-navbtn > label { display: inline-block; width: 50px; height: 50px; padding: 12px; } .responsive-navbar > .res-navbtn > label:hover,.nav #resnavbar-type:checked ~ .res-navbtn > label { background-color: gold; } .responsive-navbar > .res-navbtn > label > span { display: block; width: 25px; height: 10px; border-top: 2px solid white; } .responsive-navbar > .resnavbar-links { position: absolute; display: block; width: 100%; background-color: #1ba1d6; height: 0px; overflow-y: hidden; top: 50px; left: 0px; } .responsive-navbar > .resnavbar-links > a { display: block; width: 100%; } .responsive-navbar > #resnavbar-type:not(:checked) ~ .resnavbar-links { height: 0px; } .responsive-navbar > #resnavbar-type:checked ~ .resnavbar-links { height: 100vh; overflow-y: auto; outline:2px solid gold; } }