A Guide in Building a Responsive Basic Navbar.

Hey, welcome back!

In this article, I will be teaching us how to create a basic navbar that is responsive( mobile friendly)without any CSS framework. So let's get started.

Responsive Navbar

First, let's get to know what a navbar is and why it's important in our website.

A navigation bar is a link to appropriate sections/pages on a website that helps readers in traversing the online document. The navigation bar is the most important design element on a website because it does not only guide users to pages beyond the homepage, but it’s also the singular tool to give users a sense of orientation.

So to help your visitors navigate with ease your website needs a navbar.

we will start with our first design.

First, create a folder and open it in your text editor for me I love sublime text so that what I will be using for this work through, next create an HTML file, CSS and set up your file with the basic HTML element needed including linking your CSS page to your HTML eg

my HTML page

Here in my HTML body, I used span instead of ul so it will save me the extra stress of removing the list-style in my CSS and it will be aligned in a straight line too.

Next, I start with my CSS by removing any padding and margin by default in my body. So i will call up my body and give my margin 0 and same with my padding and i added important to it so nothing will stop it from removing the padding and margin.

body{
margin: 0!important;
padding: 0!important;
}

padding and margin removed. body{
margin: 0!important;
padding: 0!important;
}

Next, I add a background color to my navbar i will be using #4285F4 which is a lighter blue and i also added padding: 25px; so my text can have space around it, display: flex; so that my div having a class name of logo and nav-items can be on the same line instead of being under each other. will call up my class called navbar because its the container carrying the other divs

.navbar {
background-color: #4285F4;
padding: 25px;
display: flex;
font-size: 20px;
}

my text editor and the code outcome

Looking at our navbar is not looking nice because our text cant be read with ease and our text also has underlined on it so that what we should work on next. This time I want to work on my a which is my link tag since it's inside my div with the class of navbar I will call it up like this:

.navbar a{
text-decoration: none;
color: white;
padding-right: 20px;
}

text-decoration: none removes the underline on the text, the color gives it a color of white and padding-right: 20px gives it a space around it.

Next, I will work on taking it to the right since its the design we are working on so all I will do is call up my div carrying the items I want to move to the right.

.nav-items {
margin-left: auto;
padding-right:10px ;
}

I gave it a margin-left: auto so it will move it to the right end, padding-right 10px to give it a space inside the nav but this time only left.

Now our home, about and contact is now at the right

Navbar Responsiveness

Now we are going to make this navbar responsive by making it fit to all devices size, and we will be using our media query. With our media query, we will adjust our design to fit all devices.

@media screen and (max-width: 480px)

With this, I will be controlling my screen from 480px wide down to the smallest of screen size with the help of max-width.

Max-width works from the width size down wards while min-width works from the size you set to it upwards.

@media screen and (max-width: 480px) {
.navbar {
background-color: #4285F4;
padding: 25px;
display: flex;
font-size: 15px;
}

.navbar a{
text-decoration: none;
color: white;
padding-right: 20px;
}

}

So with this code above i am making my div with class name navbar have a background-color of the same lighter blue, padding of 25px and a flex and this time am making my text have a size of 15px so it will look smaller.

This is the Navbar on a small screen

Extra features you can add to your navbar

.Search

. Send button.

Added extra feature(Input and Button)

Here i added my input and my button inside a div too and give it a class name of extra-features so i can be able to style it on my CSS.

Result

So let’s style our input and our button to look nice. I love all my codes for normal view being at a place while those for my responsiveness being at a place too. So let’s make it look sexy *wink*.

input{
padding: 5px;
border: 2px solid white;
border-radius: 5px;
}

button{
background-color: transparent;
padding: 5px 10px;
margin: 0!important;
color: white;
border-radius: 5px;
border: 2px solid white;
}

worked on both the input and button

How do you think our navbar will be looking on a small screen ?? lets check out.

Oops

Not looking good at all so next we will be working on it, so if we let everything show on our navbar it will look bad because of so many things on our navbar since its small screen. So let's work on that too. I will hid my div with the class name of extra-feature which has our search and send on a small screen. So let's go back to our media query and adjust things.

.extra-feature {
display: none;
}

so under the same code, I wrote on my media query I will just add this to it. I call the class name of the div carrying them and I gave it a display: none; so that on a small screen it won't have to show. You can also try any other design of your choice.

Outcome.

So this is the basic way of creating a navbar you can explore other designs but trust me it will revolve around these codes.

You can go to my GitHub to see how I wrote my code with this link. https://github.com/joyfulshula/Navbar-Basis-

You can also reach out to me on Facebook @John Shulam, on Twitter @jj_shula, or send me an email joyfuljohn96@gmail.com

Look out for an article on how to build a footer too.