In the last two articles, we learned about vertical navigation bar and also created a full-size navigation bar in one example. Although it looks's awesome, most of the websites still use horizontal navigation bar. Let's learn how to make it...
Horizontal Navigation Bar
All the basic concepts learned while creating vertical navigation bar will remain same. So first create from what we already know...
Right Align Links
We usually see that some links in the navigation bar are aligned on the right side so that they become separate from other elements and they represent some important action. Its mostly used with Login and Register buttons.
To achieve this, just add float:right to that element.
Add Dividers
You can add dividers between each element in navigation bar by using border-right property on each list element except last-child of list.
li {
border-right: 1px solid white;
}
li:last-child {
border-right: none;
}
Fixed navigation bar
For this, we just have to fix the position of the navigation bar.
ul {
position: fixed;
top: 0;
width: 100%;
}
That's all for today. We have successfully learned navigation bars and now easily implement them in web pages. In next post, we will study about dropdowns using CSS.
Till then #keepCoding.
Comments
Post a Comment