I am going to be showing the process in which I create a navigation bar for a website. First of all, what is a navigation bar, a navigation bar or nav bar for short is a bar on the website in which you put links which you can use in navigating your way around in a website.
Designed by me
If you looked at the image provided above, at the top of the image, you can see the side designated with Home, News, Contact, About, Sign In and Sign Up. That is your navigation bar, you can use it to find your way about in a website.
NB: This is not for the new learners in coding, it will be confusing for you
First of all you have to set up your HTML i.e the doctype,html,head and body tags.
Inside the body tag, you will put a tag called the nav tag
Inside the nav tag, put a li tag which creates lists in a website, there are two types of list,
a. Ordered list
b. Unordered list
Ordered list uses numbers in their list eg
- Apple
- Ball
- Car
Unordered list uses bullet points in their list eg
. Apple
. Ball
. Car
The tag for an unordered list is Ul tag while the tag for an ordered list is Ol tag.
In the lists tag, Create Some list with anchor tags, these are tags which is used to create links
Name them something like Home, About, Contact etcThen Create your CSS file and link it to your html file.
Create a group styling with the tag of nav, header, footer and give it a display of block to make them align on top of each other.
Give the body tag a style of line height to give space between each texts and a margin of zero
Give the nav tag a width of 100% and a margin of zero
Select the nav tag and Ul tag in a parent child form and give it a background color of any choice. Give it a style of Overflow:hidden, this makes it responsive in the sense that when a website shrinks and any of the content is too big, it clips it. Then lastly give it a margin of zero and padding of zero.
Give the Ul tags a class and in a parent form i.e Ul.class li give it a list style of none to remove the bullet points and float left.
If you want to float some to the right, give the ones you want a class and in a descendant form i.e Ul.(Left-class) Li(right-class) and float right.
To design your text, do a parent-child for the Ul.class li and give it a style of display block, Text-decoration:none(to remove the underline), a text-transform upper-case to make all the text in upper case, then a padding and a text-align of center.
To make the link hover, select the list in a parent-child form i.e ul.class li a then give the a tag an action of hover i.e ul.class li a:hover then give it a style of background color and color. The color for the text and the background color for the background.
And you have your navigation bar
To the newbies in coding sorry it's a little bit confusing.