Quick Steps In Building A Simple Navigation Bar Using, HTML, and CSS.

In this article, will we look at how we can create a simple nav-bar that is responsive using only HTML, and CSS.

A navigation bar…

so the contact us pop up like that when it’s been cliked

And this is when it’s not clicked.

Looking good right?😊

So let’s get started.

A navigation bar is a user interface elements within a web page that contains link to other section of the website. And it is most commonly displayed as horizontal list of links at the top of each page. It is always placed before the main content of the page.

A navigation bar is basically a list of links, so using the <ul>and<li> elements makes a perfect sense.

So, first of all we need to create a folder in our desktop and open it in our text editor I use sublime text though, buh you can use any of your choice.

And then, create an HTML file, CSS and set up your file with the basic HTML needed, including linking your css page to your HTML. So the example is below.

So up there u can see the Linking of our CSS to HTML….

And then I had my section where I group my elements.

And then a div more like a container where I gave it a name for me to be able to call it up in my CSS stylesheet to style.

And my h1 tag, where am able to make my text big and to show it’s a heading…though styling still went on in my CSS to make it look more nice.

And then I have my list.. pricisely the un-ordered list, the ul and the li, that made up that my list up there.

And then I went on to link it. Though I didn’t link it to anything that’s why you will see a # there.

I also have my button, that has our contact us link. Though I choosed to put that there to make our nav-bar look a bit different.

And that’s that for our HTML, So let’s go over to our css where the work is been done.

So what I want you to know is that… there are different ways to arrive at the same result, there is no limitations at all. That’s one good thing about web design but you just need to be cautious of how you do it.

So…still on my CSS, showing how to style the various elements.

You know I talked about div earlier on, which is a container where we get to give it a name and call it up in our CSS, so if u scroll up to our HTML u will see where I gave it a name and then I called it up in our CSS to style the content.

So this is it for our CSS, and we are done here. It’s cool right? Yeah sure it is and so simple.

So that’s that for our navigation bar.