Getting started

Here’s the basic HTML for layout:

You can use any names for classes and Ids.

This is what we got after writing the above code, this isn’t much, but we will make it better by styling it using CSS.

Let's add some basic styling to make it look nice:

* {

box-sizing: border-box;

padding: 0;

margin: 0;

} body {

font-family: 'Josefin Sans', sans-serif;

} .navbar {

font-size: 18px;

background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);

border: 1px solid rgba(0, 0, 0, 0.2);

padding-bottom: 10px;

} .main-nav {

list-style-type: none;

} .nav-links,

.logo {

text-decoration: none;

color: rgba(255, 255, 255, 0.7);

}

This certainly looks much better, I have stripped off any default browser specific padding and margin of every element using the universal selector (*), and set the box-sizing to border-box to make it easy to resize elements.

I have used ‘Josefin Sans’ font for the navigation bar and a linear-gradient for the background. You can choose your own fonts, colors, and background.

Now add some padding and margin to make it look better.

.main-nav li {

text-align: center;

margin: 15px auto;

} .logo {

display: inline-block;

font-size: 22px;

margin-top: 10px;

margin-left: 20px;

}

The Toggle Button

It’s starting to look good. Now let’s add a little toggle button at the top right corner. For this, I am going to use Font Awesome icons.

This is what it looks like. Notice the little hamburger icon in the top left corner, this is looking weird. So let’s reposition and style it.

.navbar-toggle {

position: absolute;

top: 10px;

right: 20px;

cursor: pointer;

color: rgba(255,255,255,0.8);

font-size: 24px;

}

The navbar for mobile devices is almost complete now. Let’s add a little bit of JavaScript to enable toggle menu.

I have hidden the menu so that it’s not visible by default.

.main-nav {

list-style-type: none;

display: none;

}

Now let’s add some JavaScript code to make it visible when someone clicks on the hamburger icon.

let mainNav = document.getElementById('js-menu'); let navBarToggle = document.getElementById('js-navbar-toggle');

navBarToggle.addEventListener('click', function () {



mainNav.classList.toggle('active'); });

This code toggles the active class on the menu list. So add following code in the CSS file.

.active {

display: block;

}

Nice and easy, with that our mobile part is over, now let’s move to the desktop part.