Responsive Nav Menu Using HTML & CSS

By on August 2nd, 2019 in   CSS Front-End HTML

Whether it is real world or the virtual, people need guidance or navigation to reach their destinations. Navigation Menus fulfill this purpose in the virtual world of internet. They are considered standard if you want to jump from one page to another or look for anything particular. Nav Menu Using HTML & CSS will you a simple way of creating one.

When I started the journey of making my own website from scratch using nothing but basic HTML & CSS for the frontend (And Nodejs for the backend). I could not find many options ( bootstrap and JS were my only hopes). I challenged myself and started the work but got stuck on the responsiveness and triggering part of the menu. Finally I got it together and decided to share this with you.

This article demonstrates a Simple Responsive Navigation Menu made using HTML & CSS. This is intended to show you the concept behind responsiveness, how to use media queries and do things the CSS way which were done previously in JavaScript. I will not be going into the details of dropdowns as it can make the article lengthier and get us off the subject.

In this article you will find:

  1. Complete Code Example (downloadable)
    • For DYI kind of persons who like to understand code by themselves
    • Download the code here
  2. Explanation of Nav Menu
    • HTML template and Nav Menu structure
    • Applied CSS & its explanation

So, let’s get started.

HTML template and navbar structure

Template of this Nav Menu follows the given hierarchy:

Nav Block
  Header Block
    Left Logo Block
    Input Check Box Block
    Menu Items List Block

HTML Template code is given below:

        <div class="nav">
            <header class="header">
                <a href="" class="logo">
                    <div class="logo_subblock">
                        <div class="media">
                            <img src="./img_avatar.png" alt="Avatar">
                            <div class="media-body ">
                                <h4>Your Title Here</h4>
                                <p>Your Tag Line Comes Here</p>
                            </div>
                        </div>
                    </div>
                </a>
                <input class="menu-btn" type="checkbox" id="menu-btn" />
                <label class="menu-icon" for="menu-btn"><span 
                 class="navicon"></span></label>
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a class="headerMenuIcon" href="#"></a></li>
                </ul>
            </header>
        </div>

and but At this point of time, the Nav Menu should look something like this with elements stack on each other (nothing interesting to see).

Plain HTML Structure
Plain HTML Structure

Applied CSS & Its Explanation

Now lets get started with the fun part, the magic of CSS. (It should be noted that Simple Responsive Nav Menu follows a mobile-first approach which means that styling will be done for mobile first, and then for wider screens). For the purpose of understanding let us divide the CSS styling into following main sections

1. Environment Setting (General Styling)

Environment Setting consist of following steps:

  • Boxing all elements so their padding and margins are included in their sizes
  • Setting the layout, displays and sizes of wrapping elements
* {
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}
html, body {
    margin: 0px;
}
/* body */
.container {
    display: flex;
    padding: 0px;
    margin: 0px;
    flex-direction: column;
    color: white;
    font-family: 'Raleway', sans-serif;
    background-color: #cccccc;
    color: black;
}
/* elements */
.nav{
    display: flex;
    flex-wrap: wrap;
    flex: 100%;
}
/* Navigation header */
.nav {
    height: 10%;
    max-height: 10%;
    color: black;
}
.nav a {
    color: #000;
}

Nav Menu would look like this after the initial CSS (yes, still no major change! )

Nav Menu - After Initial CSS
Nav Menu – After Initial CSS

2. Logo And Title Area

Following changes to the Logo And Title area are required:

  • Centering the elements in a flex-box
  • Sizing the child elements as per requirement
.nav .media {
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
}
.nav .media img {
    border-radius: 50px;
    width: 50px;
    margin: auto;
    margin-right: 10px;
}
.nav .media .media-body h4 {
    margin: auto;
    margin-bottom: 0px;
    font-size: 1.2em;
    font-weight: normal;
}
.nav .media .media-body p {
    margin: auto;
    margin-bottom: 0px;
}

Intermediary look of Nav Menu would be something like this:

Nav Menu -  Logo Box Styled
Nav Menu – Logo Box Styled

3. Header Menu

Header Menu CSS will include the following (important):

  • Centering, sizing and styling menu list, list items and list item links
  • Setting Menu (right unordered list) transition
  • Creating Menu Hamberger Icon (for smaller screens or mobile phones)
    • Giving fixed padding to checkbox label
    • Drawing lines before and after the label with background property
    • Positioning the before and after lines at small distances
/* header menu */
.header ul {
    display: flex;
    flex-direction: column;
    justify-items: center;
    text-align: center;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
    padding: 0px;
    margin: 0px;
}
.header li {
    width: 50%;
    align-self: center;
}
.header li a {
    display: block;
    width: 100%;
    padding: 15px 15px;
    text-decoration: none;
}
.header li a:hover, .header .menu-btn:hover {
    background-color: #ecedf0;
    border-radius: 10px;
    margin: 0px;
}
/* menu */
.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
    cursor: pointer;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}
.header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.header .menu-icon .navicon:before {
    top: 5px;
}
.header .menu-icon .navicon:after {
    top: -5px;
}

As a result, our Nav Menu is starting to look somewhat acceptable to be used in our website:

 Nav Menu -  Menu Styling
Nav Menu – Menu Styling

4. The Hamburger Menu And Its Response To Screen Width

Menu Button Magic

Here comes the main crust of menu bar, the transition of button with CSS, it includes the following steps:

  • Hiding the checkbox and using its label only
  • Do the following on clicking of label or checkbox:
    • Make menu list appear (from max-height property)
    • Make label’s background transparent so we can use before and after elements for our transitions
    • Before line to be rotated down to 45 degrees
    • After line to be rotated up by 45 degrees
  • Positioning and sizing of menu’s account element
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    max-height: 250px;
}
.header .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}
.headerMenuIcon {
    background-image: url(./headerMenu.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 1.4em;
    background-position: center;
    height: 59px;
    padding-bottom: 5px;
}

Nav Menu is almost complete with just the media queries remaining (you can feel the power now):

  Nav Menu -  Menu Button Styling
Nav Menu – Menu Button Styling

The Power of Media Queries

Now let’s make the Nav Menu responsive which implies that whenever the screen width is more than 54em (864px), do the following:

  • Make Menu List’s direction from vertical to horizontal
  • Align Menu List Items to left
  • Set max-height to default
  • Hide the checkbox label (the hamburger menu)
@media (min-width: 54em) {
    .header ul {
        flex-direction: row;
        justify-items: center;
        align-items: center;
        padding-right: 10px;
        margin: 5px;
    }
    .header li {
        float: left;
        width: inherit;
    }
    .header li a {
        padding: 20px 30px;
    }
    .header .menu {
        clear: none;
        float: right;
        max-height: none;
    }
    .header .menu-icon {
        display: none;
    }
}

As a result of above applied CSS, our completed Nav Menu looks like this:

   Responsive Nav Menu -  Desktop
Responsive Nav Menu – Desktop
   Responsive Nav Menu -  Mobile
Responsive Nav Menu – Mobile

Conclucion

In conclusion, this was the demonstration of the simplest Nav Menu you can make with pure HTML and CSS. However, there will be many ways to make anything in the world of development and this is one of them.The important thing is to understand the concept and use it for ones needs. Let me know what you guys think or if you require any help. Till next time!!!

2 responses to “Responsive Nav Menu Using HTML & CSS”

  1. […] addition, you can also check out my article on how to make a Navigation Menu with just CSS. Function of Navigation Menus and Sidebars is somewhat similar and any one may be used as per […]

  2. […] in approach-based development using local resources, check out my other articles on Sidebar and Navigation Menu as […]

Leave a Reply

Your email address will not be published. Required fields are marked *