Full-Screen Overlay Navigation Bar Using HTML and CSS
Tags: html, css, webdev, beginners
Published: 2022-02-21 06:11:37

Full blog post here: [Navigation Bar HTML](https://codelikeadev.com/blog/full-screen-navigation-bar-html-css)

<p>In this blog post, we are going to create a fancy navigation bar using HTML, CSS, and Javascript.</p>
<p>This navigation menu would be not just a regular navbar, but, a full-screen overlay navigation menu.</p>
<p>This will be a responsive navigation bar menu that will be responsive for both mobile and desktop displays.</p>
<p>It will be really fun to code this and navigation bars like these create an amazing impression of your website in the user's head.</p>
<h2>&nbsp;</h2>
<h2>Benefits of Full Screen Navigation Bar Menu</h2>
<p>Well, you can have a navigation bar that is right at the top of the website. So what does this full-screen overlay navigation achieve?</p>
<p>As a pro, you get a consistent view between your mobile and your desktop.</p>
<p>Users are able to interact with your responsive mobile website and desktop site in the same way.</p>
<p>Also, you get a lot of free space on the top of the websites which makes your website a little different from other websites out there.</p>
<h2>&nbsp;</h2>
<h2>Create A Full-Screen Navigation Bar Menu</h2>
<p>To begin with, we will create three files in our code editor:</p>
<ol>
<li>index.html file</li>
<li>style.css file</li>
<li>script.js file</li>
</ol>
<p>After these, we will create a basic HTML structure using the Emmet extension for visual studio and will link our CSS and Script file.</p>
<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjg1olrq-vlGJAjUS9eQnnCK88Xgu4LF_fLa-IWg7KMLX4b2CJiTvgicxHK5IeutvgEcpp5P8xKkrGp7LEkfh_78-UQzVZKmhXKxZUO38P1r4PlmkrNL_YitV3KpsSWs_g5DVqogZdZagY2tR-fQj8PyG7VDxYHVIxnOJvnFtw7upP8vbLhVIUPQFgl"><img alt="" data-original-height="635" data-original-width="1489" src="https://blogger.googleusercontent.com/img/a/AVvXsEjg1olrq-vlGJAjUS9eQnnCK88Xgu4LF_fLa-IWg7KMLX4b2CJiTvgicxHK5IeutvgEcpp5P8xKkrGp7LEkfh_78-UQzVZKmhXKxZUO38P1r4PlmkrNL_YitV3KpsSWs_g5DVqogZdZagY2tR-fQj8PyG7VDxYHVIxnOJvnFtw7upP8vbLhVIUPQFgl=s16000" /></a></div>
<p><br /><br /></p>
<h3>Adding HTML Elements For Navigation Bar</h3>
<p>Now, to the HTML structure, we will add a few HTML elements and create our header and our Navigation bar.</p>
<p>This is what the HTML code looks like:</p>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiZiRkYHros4ePzIsCgE8sOMUWUkPkLi8UaCRweKEN7ICm32LmS3FHR10dascbxwrx5OqJ1Q4Cxbnx_9nW_fSYzfXiYiMzWQAtEx32Z38Fw8rHR8PUk7Ovfvz3Xq-sBdUK-ehAJT9DYdA1NxhUbpTgcAcYb4cywsr6ufM8ZCm71VJgNfnKtvBZWy3_e"><img alt="" data-original-height="813" data-original-width="1473" src="https://blogger.googleusercontent.com/img/a/AVvXsEiZiRkYHros4ePzIsCgE8sOMUWUkPkLi8UaCRweKEN7ICm32LmS3FHR10dascbxwrx5OqJ1Q4Cxbnx_9nW_fSYzfXiYiMzWQAtEx32Z38Fw8rHR8PUk7Ovfvz3Xq-sBdUK-ehAJT9DYdA1NxhUbpTgcAcYb4cywsr6ufM8ZCm71VJgNfnKtvBZWy3_e=s16000" /></a></p>
<h3>Adding Styles To Our Navigation Menu HTML Elements</h3>
<p>Now, it's time to style our header and nav elements and create a fancy full-screen overlay navigation menu.</p>
<p>The CSS will look like this</p>
<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjUq4XVrl8sIpnwCJCbrbjBaQrUZoiK16BYAEmhu-X6BOtfWBD2qaHY9Tn167jPVh-FRwVktzc7XXRo9Ta2RvcImteUsF8hsefZFKJnpXHwaPcb0QFOMqARIGhx29_dX-yWCL7zjjvWrEwGZxcNahOo-GvAd2F8aE-9T4Yb8fX12yei5mu_Ugewb-NY"><img alt="" data-original-height="822" data-original-width="1487" src="https://blogger.googleusercontent.com/img/a/AVvXsEjUq4XVrl8sIpnwCJCbrbjBaQrUZoiK16BYAEmhu-X6BOtfWBD2qaHY9Tn167jPVh-FRwVktzc7XXRo9Ta2RvcImteUsF8hsefZFKJnpXHwaPcb0QFOMqARIGhx29_dX-yWCL7zjjvWrEwGZxcNahOo-GvAd2F8aE-9T4Yb8fX12yei5mu_Ugewb-NY=s16000" /></a></div>
<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiXdDyXSuFYe5CC1nzyKrJhCR8VV9SoXs3zwsa50_LPmYfI9ft2VXOH0A-yhipoLWTKuBOpmmKt_RB310RjdwSHlcNeDyAxrntBgKDBI1UH5WJVAAZ97POgL9xzrADw6HMHvh3Xvk6JHaIXAzxDJNWAForT6HROOwCyLJZGetkwPB9iwzy5dfa7rZWg"><img alt="" data-original-height="857" data-original-width="1482" src="https://blogger.googleusercontent.com/img/a/AVvXsEiXdDyXSuFYe5CC1nzyKrJhCR8VV9SoXs3zwsa50_LPmYfI9ft2VXOH0A-yhipoLWTKuBOpmmKt_RB310RjdwSHlcNeDyAxrntBgKDBI1UH5WJVAAZ97POgL9xzrADw6HMHvh3Xvk6JHaIXAzxDJNWAForT6HROOwCyLJZGetkwPB9iwzy5dfa7rZWg=s16000" /></a></div>
<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhWCyoypGSripiLDpUyShmn6nSiS_JSydcc2IvzjYVqDfPTbp-BLycqV8DJ-jtx99sXBGMb90u-u57mtczeLRoYDTHJkfJGiVgJuAyL0qJDSV5Z08Gs83q1xb4FzVd8N3gr0s4FmnQ7yY00Wo26_O6NzQUyivVzhIU94Sk-FQMbXR5TMVCTbD8suOgG"><img alt="" data-original-height="479" data-original-width="1481" src="https://blogger.googleusercontent.com/img/a/AVvXsEhWCyoypGSripiLDpUyShmn6nSiS_JSydcc2IvzjYVqDfPTbp-BLycqV8DJ-jtx99sXBGMb90u-u57mtczeLRoYDTHJkfJGiVgJuAyL0qJDSV5Z08Gs83q1xb4FzVd8N3gr0s4FmnQ7yY00Wo26_O6NzQUyivVzhIU94Sk-FQMbXR5TMVCTbD8suOgG=s16000" /></a></div>
<p><br />The result of the above HTML and CSS is that we have a top website header and a navigation menu. But the nav is not an overlay as we want at the moment.</p>
<p>Now we will add some more CSS to make it an overlay.</p>
<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEi-iMRzKtyvmFUTK_LOszVXbhL0PSTBuQnPZdDttVLd4iGjxjnjXtwPgCrnSdV0CheTuhaLb8nzFbXXqqyXppT3IZsZyq1vLMHztmByZhpzF9vzBUwtNN4yO7lmxmYEfS0_SJqKKE8Si7jYSQ_dW2j15sqRiOK0zZXMiRpVvqf0C7EvdPZ-7Fwzsu2R"><img alt="" data-original-height="378" data-original-width="1488" src="https://blogger.googleusercontent.com/img/a/AVvXsEi-iMRzKtyvmFUTK_LOszVXbhL0PSTBuQnPZdDttVLd4iGjxjnjXtwPgCrnSdV0CheTuhaLb8nzFbXXqqyXppT3IZsZyq1vLMHztmByZhpzF9vzBUwtNN4yO7lmxmYEfS0_SJqKKE8Si7jYSQ_dW2j15sqRiOK0zZXMiRpVvqf0C7EvdPZ-7Fwzsu2R=s16000" /></a></div>
<p><br />These three CSS properties make our nav a perfect overlay.</p>
<p>Now we have to make use of some Javascript to make the navigation menu hide and show.</p>
<p>The Javascript is very simple, we are just toggling a class that hides or shows the menu.</p>
<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgOxOIeo0vtMQ4irARLu9foe0e7kT0za67UpHPHRXH9BSdZaV_YcyAwWk5c78Y0l29pihIWYhqj2enrjs39iYD6DlJdStVsDBWFta6QN2ABgY555ebQrj6JO1yRWmsuYE7vrxYu68bHIai6WJ5HiBYeAjKXy1BQ9x_4wX5BsAgbqejZlIddpAZEhTRJ"><img alt="" data-original-height="420" data-original-width="1484" src="https://blogger.googleusercontent.com/img/a/AVvXsEgOxOIeo0vtMQ4irARLu9foe0e7kT0za67UpHPHRXH9BSdZaV_YcyAwWk5c78Y0l29pihIWYhqj2enrjs39iYD6DlJdStVsDBWFta6QN2ABgY555ebQrj6JO1yRWmsuYE7vrxYu68bHIai6WJ5HiBYeAjKXy1BQ9x_4wX5BsAgbqejZlIddpAZEhTRJ=s16000" /></a></div>
<h2>&nbsp;</h2>
<h2>The Result - Our Navigation Bar</h2>
<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiZf4zCvVNcJHz6MIc8hoJAZxp2dUvKlFtyY0sTughmLz6qRGXRodLHwFitW4cnXLsR9cs4BcPh7LkS2-t_haMHokWeU0dIxjpzA9gY6ntf6dS6__U03T-TXM4rm4Eq7TYw72veF5ZGrafdZ3ps5hmhaA0X2ryHOqX3TFaBJRXXY44tSAydqONWr26z=s999"><img alt="" border="0" data-original-height="469" data-original-width="999" src="https://blogger.googleusercontent.com/img/a/AVvXsEiZf4zCvVNcJHz6MIc8hoJAZxp2dUvKlFtyY0sTughmLz6qRGXRodLHwFitW4cnXLsR9cs4BcPh7LkS2-t_haMHokWeU0dIxjpzA9gY6ntf6dS6__U03T-TXM4rm4Eq7TYw72veF5ZGrafdZ3ps5hmhaA0X2ryHOqX3TFaBJRXXY44tSAydqONWr26z=s16000" /></a></div>