Navigation bars play an important role for the incoming visitors to your website, since they can easily jump to the other parts, pages or posts of your website linked through the navigation bar. Today, I’ll teach you that how can we create a minimal navigation bar using CSS and HTML. The task is damn easy to be done and in the end you will be able to get a very basic and smart navigation bar with cool visual looks.
Structural HTML Code for the navigation bar:
Now, as we all know that the navigation bars are included in the top section of any webpage. Thus first of all we will define a division (div) at the top of our html page with a unique id name “navigation“, so that we may be able to apply CSS code to this div later.
<div id="navigation"> <!-- navigation bar content goes here --> </div>
So, above we have created a division at the top of our page below the <body> tag, which has been given an ID navigation. Next, step will be to add an un-ordered list in the above div, which is going to contain a list of our links which we want to be appeared in the navigation bar. So, the code for the navigation bar is:
<div id="navigation"> <ul> <li><a href="https://www.talkofweb.com">Home</a></li> <li><a href="https://www.talkofweb.com/contact-us/">Contact Us</a></li> <li><a href="https://www.talkofweb.com/about-talk-of-web/">About Us</a></li> </ul> </div>
Thus, I have added three links in the lists of the unordered list above through the HTML code. Now, the time is to style this very basic navigation.
Styling the Navigation bar using CSS which is made in HTML:
Assigning Width and Background color to Div:
In CSS we can define the width of the division which will be 900px and next step will be to define the background color of this navigation which will be grey. (You can easily change all these properties once you end up with this tutorial explaining how to code a navigation bar). So, lets give a width and background color to the div which has id of navigation. (In CSS we select id through hashes #)
<style type="text/css">
#navigation {
width: 900px;
margin: auto;
overflow: hidden;
background: #ccc;
}
</style>The margin auto, means that the div is going to be placed in the center of the page. The overflow hidden property will expand the div up to the content contained in the div. Rest the background property gives grey color to the div.
Designing the links in the navigation bar and <li> elements:
Now, we need to specify the color for the links and the background color of the parent element the <li>. Thus for this, we need to target the <li> tags and <a> tags contained in the div of id navigation. We will do it like this:
<style type="text/css">
#navigation ul {
list-style:none;
}
#navigation li {
float: left;
margin: 6px;
list-style: none;
}
#navigation a {
color: #fff;
padding: 8px;
background: #000;
font-family: verdana;
text-decoration: none;
}
</style>And the code is complete, let me explain you the above code. The first thing we did is to give a property of “list-style: none” to both <li> and <ul> elements, actually we don’t want dots to appear with out list, as if you have used Microsoft word and Microsoft outlook during composing a document. Second thing I did is to add a margin to the element <li> so that it may not collide with the inner edges of the container. The third task is to define the color of a element and to give it inner padding of 10px. Fourth task is to give a background to the <a> element of the black i-e #000. Rest, I floated the <li> to the left so that it may be aligned in the line i-e horizontally.
How to use this navigation bar:
You can use it anywhere, if you copy the <li><a href=”link”>Title</a></li> elements in the code and re paste below with custom title and link and then paste it below other <li> elements then you will be able to add as many more links as you want. Rest, wherever you use it, don’t forget to paste the style sheet also. Don’t forget to merge the both style sheets given in one style sheet code. That is it, now you can also change the fonts, background colors and other things.
You can use this navigation bar in Blogger as well as WordPress. Depends on how much beyond the limits can you think 😉
