HTML Course | Creating Navigation Menu - GeeksforGeeks

06 Sep, 2021
Course Navigation 
In the last article, we created the entire structure of our website using HTML elements and Tags. Let’s now start building the website in parts.
The first part of the website is the header. So the first thing we will create is the navigation menu in the Header of the webpage.
The navigation bar contains:  
A logo aligned to the left.
A menu of five items aligned to the right.
Let’s look at the part of the code of the header menu from our index.html file. Below is the portion of code of the Header menu where the highlighted part is the top navigation bar:  
HTML
<!-- Header Menu of the Page --><header>    <!-- Top header menu containing       logo and Navigation bar -->    <div id="top-header">                         <!-- Logo -->        <div id="logo">          </div>                    <!-- Navigation Menu -->        <nav>                              </nav>    </div>         <!-- Image menu in Header to contain an Image and         a sample text over that image -->    <div id="header-image-menu">      </div></header>
The first task is to add the image for the logo. Steps to include image and create logo: 
Download image by clicking here.
Copy and Paste the image to the directory: root/images. Where root is the top directory of our project. In our case it is named as “sample project”.
Include the image in the code using img tag.
The second task is to create an unordered-list in HTML inside the navigation section of the header menu:  
Add an unordered list in the navigation menu section with 5 list-items named “Home”, “About Us”, “Our Products”, “Careers”, and “Contact Us”.
The code of the Header section after adding the above two things will look like as shown below:  
HTML
<!-- Header Menu of the Page --><header>             <!-- Top header menu containing         logo and Navigation bar -->    <div id="top-header">                     <!-- Logo -->        <div id="logo">            <img src="images/logo.png" />        </div>                            <!-- Navigation Menu -->        <nav>          <div id="menu">            <ul>                <li class="active"><a href="#">Home</a></li>                <li><a href="#">About Us</a></li>                <li><a href="#">Our Products</a></li>                <li><a href="#">Careers</a></li>                <li><a href="#">Contact Us</a></li>            </ul>          </div>        </nav>    </div>        <!-- Image menu in Header to contain an Image and         a sample text over that image -->    <div id="header-image-menu">     </div></header>
If you now open the index.html file in a browser, you will see the below output: 
This looks very different than what we saw in the screenshots of the final project. This is because our website is missing CSS for now. That is we have just created the structure of the navigation bar, to make it look beautiful, we will have to add styles using CSS.
We will design the navigation bar later but first create a file named “style.css” and add it to the folder “sample project/css“. Also include the CSS file created to the “index.html” file by adding the below line in between head tags.  
HTML
<link rel="stylesheet" href="css/style.css">
Before we begin styling the navigation menu, the first thing needed to do is to set the default CSS values for the HTML elements. Copy and Paste the below code in your “style.css” file: 
CSS
html, body{    height: 100%;}     body{    margin: 0px;    padding: 0px;    background: #FFFFFF;    font-family: 'Roboto';    font-size: 12pt;}         h1, h2, h3{    margin: 0;    padding: 0;    color: #404040;}     p, ol, ul{    margin-top: 0;} p {    line-height: 180%;} ol, ul{    padding: 0;    list-style: none;}     .container{       /* Set width of container to        1200px and align center */    margin: 0px auto;    width: 1200px;}
As you can see in the above CSS that we have set the default values for almost every useful HTML element required for the project. Also, we have created a CSS class named “container“. This basically defines a container with a width of 1200px and all of the text within it aligned to center. Add this class named container to the <header> tag.The next step is to assign some id’s to our HTML elements and then use those id’s in the CSS file to style them. Here, we already have assigned id’s to the HTML elements as you can see in the above code. Let’s just begin adding styles to them.
Below is the step by step guide to style the navigation bar: 
Styling overall Header: There isn’t much styling needed for the header tag. The header tag is just needed to be set to “overflow: hidden” to prevent window from overflowing on browser resize. Add the below code to style.css: 
CSS
header{         overflow: hidden;}
Styling Navigation Bar(#top-header): Set a fixed height of 60px for the navigation bar and align the texts to center. Add the below code to style.css: 
CSS
#top-header{             text-align: center;    height: 60px;}
Styling Logo(#logo): Remove padding from the parent div of logo. Make both parent and image floated towards left and assign widths to them. Add the below code to style.css: 
CSS
#logo{    float: left;    padding: none;    margin: none;    height: 60px;    width: 30%;} #logo img{    width: 60%;    float: left;    padding: 10px 0px;}   
Styling Navigation Menu(#menu): Add below code to style.css: 
CSS
#menu{    float: right;    width: 70%;    height: 100%;    margin: none;}     #menu ul{    text-align: center;    float: right;    margin: none;    background: #0074D9;}     #menu li{    display: inline-block;    padding: none;    margin: none;}     #menu li a, #menu li span{    display: inline-block;    padding: 0em 1.5em;    text-decoration: none;    font-weight: 600;    text-transform: uppercase;    line-height: 60px;}     #menu li a{             color: #FFF;}     #menu li:hover a, #menu li span{    background: #FFF;    color: #0074D9;    border-left: 1px solid #0074D9;    text-decoration: none;}
The overall CSS code combining all of the above class and id’s for the navigation bar is shown below:  
CSS
/*************************//*    Styling  Header    *//*************************/header{         overflow: hidden;} #top-header{             text-align: center;    height: 60px;} /****************/   /* Styling Logo *//****************/#logo{    float: left;    padding: none;    margin: none;    height: 60px;    width: 30%;} #logo img{    width: 60%;    float: left;    padding: 10px 0px;}    /***************************//* Styling Navigation Menu *//***************************/#menu{    float: right;    width: 70%;    height: 100%;    margin: none;}     #menu ul{    text-align: center;    float: right;    margin: none;    background: #0074D9;}     #menu li{    display: inline-block;    padding: none;    margin: none;}     #menu li a, #menu li span{    display: inline-block;    padding: 0em 1.5em;    text-decoration: none;    font-weight: 600;    text-transform: uppercase;    line-height: 60px;}     #menu li a{             color: #FFF;}     #menu li:hover a, #menu li span{    background: #FFF;    color: #0074D9;    border-left: 1px solid #0074D9;    text-decoration: none;}
Open the index.html file in browser now, can you see something as shown in the below image. If not, please tally and recheck your code with ours, you must have missed something: 
So, we have successfully created the navigation bar for the header of our Website. The next thing is to insert the image and a text over the image just below the navigation bar in the header.
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
maniacpshyco
ysachin2314
chhabradhanvi
HTML-course-basic
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?