This tutorial will be based on creating a navigation bar with full width mega menu



<h1>What will I learn?</h1>
1.    You will learn how to create a navigation bar
2.    You will learn how to link the navigation menu to an external link
3.    You will learn how to create a full width mega menu
4.    You will how to use more of Cascading style sheets (CSS)
5.    You will learn how to link a style sheet to font awesome styles 
6.    You will learn how to use html tags

<h1>Requirements</h1>
1.     A standard computer system (Personal computer or a desktop computer)
2.    Notepad++ (or default System notepad)
3.    A standard browser (Mozilla Firefox, Chrome or any)

<h1>Difficulty Level: </h1>
•    Amateur / Intermediate 
Description 
Hi everyone, you are welcome to this tutorial lesson. I  will be teaching you how to create navigation bar with full width mega menu using HTML and CSS. Also I make comments available for proper understanding, all the programs I used (Notepad++) are open source and are all included in the links section of the github repository

Let get started.

<h1>DESCRIPTION</h1>
Hi everyone, you are welcome to this tutorial lesson. I  will be teaching you how to create navigation bar with full width mega menu using HTML and CSS. Also I make comments available for proper understanding, all the programs I used (Notepad++) are open source and are all included in the links section of the github repository
Let get started.

<b><h3>STEP 1:</h3></b>

![step1.JPG](https://steemitimages.com/DQmcXXnw9xnS5GxT9JhYqfCPL1Cqp38672rVS2Byj2TK6cN/step1.JPG)
I start by lunching my notepad++ (you can use any other editor) followed by saving it with an extension (.html). I began to type in the codes starting with HTML tag then the head tag, follow by linking the addresses we need between the head commands (linking to fontawesome cdn styles).

<b><h3>STEP 2:</h3></b>

![step2.JPG](https://steemitimages.com/DQmNdU92h4JqB9kQ9xSVYDtDRfk4Whbi6ZvXfnx1TaAiRkK/step2.JPG)
I start with the body tag follow by the *div* commands were I created the class *MegaNavbar*. This section specify the links the navigation bar will hold, one of which I used fontawesome icon class *fa fa-caret-down*.


<b><h3>STEP 3:</h3></b>

![STEP4.JPG](https://steemitimages.com/DQmaQu5vkn1KDwQyQaFNsnCfaBRvb5hDYXvGMuVbVrko5FM/STEP4.JPG)
In this section of the tutorial, I create a class called *nav-dropdown* and also class called *header*. I create a row and column class for the mega menu which has the links the mega navigation menu will hold


<b><h3>STEP 4:</h3></b>

![STEP4.JPG](https://steemitimages.com/DQmaQu5vkn1KDwQyQaFNsnCfaBRvb5hDYXvGMuVbVrko5FM/STEP4.JPG)
In this session, content illustrating what we have done is written with use of h3 and p tag

<b><h3>STEP 5:</h3></b>

![STEP5.JPG](https://steemitimages.com/DQmdxjH4Qa7gwQo4c4XbvCwQMiLwbcMCrvqhJ1FebxzskH8/STEP5.JPG)
**STYLING THE NAVIGATION BAR**
In this session, we are going to start styling the navigation bar. Move your cursor below the  *<style>* tag ; this is where the class *MegaNavbar* will be styled. I made the Navigation menu background blue while the hover background color is red. You can view the above image for the codes

<b><h3>STEP 6:</h3></b>

![STEP6.JPG](https://steemitimages.com/DQmbmBCEAy2gwxmhqC5GpGTqwpFmJob4y1GxXswxXKwUHLr/STEP6.JPG)
**STYLING THE MEGA MENU DROP DOWN**
In this session, The *dropdown* class will be styled. You should continue from where I stopped in the **STEP 5**, refer to the above image for the codes

<b><h3>STEP 7:</b></h3>

![STEP7.JPG](https://steemitimages.com/DQmPP43oFyvVgLDjGn4w2ThRqxadPJmuB2KPCrpJRbJ8UkG/STEP7.JPG)
**STYLING THE MEGA MENU COLUMNS**

In this session i style  three equal columns that floats next to each other in the mega menu, You should continue from where I stopped in the **STEP 6**, refer to the above image for the codes.
<h2>NOTE: Do not forget to close the style **(Style)** tag and the head (head) tag.  Also the last paragraph of the codes should close with body *(body)* and html closing tag *(html)* <h2>

<b><h3>OUTPUT:</h3></b>

![result.JPG](https://steemitimages.com/DQmZMzekajwuQhkBv9kd7NdsR8YhF7SW9Bz5DxBhxt3cJ1n/result.JPG)
 This is the last step of this tutorial, Save the codes and run it on your browser *(press ctrl+alt+shift+x  to run in firefox if you’re using notepad++)*. You should get the same result with the above.

<h4>Below is My PC Operating System and System properties</h4>

![os.JPG](https://steemitimages.com/DQmZnQa2ocBMmnfEf8c2vq4XsZnepdoAMJmmdAU7cZ3zmqT/os.JPG)
<h4>CODES USED IN THIS TUTORIAL</h4>

```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.MegaNavbar {
    overflow: hidden;
    background-color: #3333ff;
    font-family: Arial;
}

.MegaNavbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
}

.MegaNavbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.nav-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.nav-dropdown .header {
    background: red;
    padding: 16px;
    color: white;
}

.dropdown:hover .nav-dropdown {
    display: block;
}

/* i will Create three equal columns that floats next to each other in the mega menu */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: #ccc;
    height: 250px;
}

.column a {
    float: none;
    color: black;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.column a:hover {
    background-color: #ddd;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>

<body>

<div class="MegaNavbar">
  <a href="#home">Home</a>
  <a href="https://mobile.facebook.com/Holusesi?refid=12">Contact me</a>
  <div class="dropdown">
    <button class="dropbtn">Test Mega Menu 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="nav-dropdown">
      <div class="header">
        <h2>Below are the menu</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>CATEGORY 1</h3>
            <a href="#">LINK ONE</a>
            <a href="#">LINK TWO</a>
            <a href="#">LINK THREE</a>
        </div>
        <div class="column">
          <h3>CATEGORY 2</h3>
          <a href="#">LINK ONE</a>
            <a href="#">LINK TWO</a>
            <a href="#">LINK THREE</a>
        </div>
        <div class="column">
          <h3>CATEGORY 3</h3>
          <a href="#">LINK ONE</a>
            <a href="#">LINK TWO</a>
            <a href="#">LINK THREE</a>
        </div>
      </div>
    </div>
  </div> 
</div>

<div style="padding:16px">
  <h3>Above is an example of a Mega menu  with a Full width dropdown menu</h3>
  <p>Click on the Hover "Test Mega Menu" link to see the mega menu.</p>
</div>

</body>
</html>
```
<h3>USEFUL LINKS</h3>
•    Github repository
•    [Notepadd++ Website!]( https://notepad-plus-plus.org/)
•    [Website to learn CSS More!]( https://www.w3schools.com/css/)
•    [Notepadd++  download link for window 64bit!]( https://notepad-plus-plus.org/download/)
•    [Notepadd++  download link for window 32bit!]( https://notepad-plus-plus.org/download/)


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@ewuoso/how-to-create-a-navigation-bar-with-full-width-mega-menu">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>