Simple Top Navigation Menu Using HTML and CSS - [With Source Code]
Tags: html, css, webdev, beginners
Published: 2022-02-04 03:04:46

<p>Every website needs some sort of navigation so that users coming onto this web page can easily navigate between the pages of the website.</p>
<p>There are so many different navigation menus one can create like side navigation on a website, top navigation that stays on the top, maybe, one on the right side?</p>
<p>Well wherever you place it, these navigation menus or navbar menus are really an essential part of a website.</p>
<p>Creating them from scratch can not be so straightforward when you are just starting with HTML and CSS coding.</p>
<p>So in this blog post, we will create a top navigation menu or navbar from scratch using HTML and CSS and I will also attach the source code for it.</p>
<h2>Creating The Folder Structure For Website</h2>
<p>I have created a folder for myself called Nav1 and inside this folder with Visual Studio code which will be my editor in which I will write my HTML and CSS code.</p>
<p>Once the folder is open in visual studio code, I will create two files, an index.html and a style.css file.</p>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEisGrT2Az20HVFgCPSRc8ICGhL1a4uRzt3Z147ypeCeOYhPa2b4QIxjzfEix4fbUucH8xGeJN6yefn6rB0EIPrUcPGt-vgSO0oM1fUT6oGLvEI1nsjaozV-yBI91iGMI8baYbCDmJvKCsYG3hRCbcxbTlDzJ9RJvnwLMfWfHiXKVjTbgMDOilIz7nNs=s406"><img alt="" border="0" data-original-height="146" data-original-width="406" src="https://blogger.googleusercontent.com/img/a/AVvXsEisGrT2Az20HVFgCPSRc8ICGhL1a4uRzt3Z147ypeCeOYhPa2b4QIxjzfEix4fbUucH8xGeJN6yefn6rB0EIPrUcPGt-vgSO0oM1fUT6oGLvEI1nsjaozV-yBI91iGMI8baYbCDmJvKCsYG3hRCbcxbTlDzJ9RJvnwLMfWfHiXKVjTbgMDOilIz7nNs=s16000" /></a></p>
<h2>Creating The HTML Structure</h2>
<p>We will start by creating the basic HTML structure for our website.</p>
<p>We are using the Emmet extension for visual studio code so we will start writing html and Emmet will give us the boilerplate HTML structure for the website.</p>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjMdJWV51998a0n8gXG-hGpzjljIy7hNUAPQu6zRrjQzzdW7V1ewm0rGteFSsbKtWv_vn-px7W81MA3ozYjPaWx2OE7oiNc_Oy70oqM5lOGrKzUvA_fkE_E69rpVYhWZRX882fXm96KKw4vSf0V05zVS9yo5F6BnQ9G4Ip2M1hstHmPg-HdJx6G_MCC=s858"><img alt="" border="0" data-original-height="398" data-original-width="858" src="https://blogger.googleusercontent.com/img/a/AVvXsEjMdJWV51998a0n8gXG-hGpzjljIy7hNUAPQu6zRrjQzzdW7V1ewm0rGteFSsbKtWv_vn-px7W81MA3ozYjPaWx2OE7oiNc_Oy70oqM5lOGrKzUvA_fkE_E69rpVYhWZRX882fXm96KKw4vSf0V05zVS9yo5F6BnQ9G4Ip2M1hstHmPg-HdJx6G_MCC=s16000" /></a></p>
<p>Then we will link our style.css to the HTML page.</p>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhrq8yeLJpWFazO1lupaaW1Fli0znDgWS6xWpgZsNBxwulB4E8eT3hPTAfnN2njmwGEv9uuW0WAMPd4IMN1BVg___eBmneJFy6uHrzkiwfYJ7qdxQj4byVZCZseweTjkpp4o1eaU9EcBQygQUGhL1CmG_V3T53RI2RcktPwcXvW7ofJPs8Ke0MpAlk0=s612"><img alt="" border="0" data-original-height="95" data-original-width="612" src="https://blogger.googleusercontent.com/img/a/AVvXsEhrq8yeLJpWFazO1lupaaW1Fli0znDgWS6xWpgZsNBxwulB4E8eT3hPTAfnN2njmwGEv9uuW0WAMPd4IMN1BVg___eBmneJFy6uHrzkiwfYJ7qdxQj4byVZCZseweTjkpp4o1eaU9EcBQygQUGhL1CmG_V3T53RI2RcktPwcXvW7ofJPs8Ke0MpAlk0=s16000" /></a></p>
<p>Then we will go ahead and add some elements to our body of the website.</p>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgwoQDWfPeFtaAqs9Y4V-a70BVaJ5ip_-8bPJO3_I1y53y5PCEP9LUyJ8S4C3Ui1MFbB4GUyLIJeRvH03_GqJFagfJNmIA9YqWtyxC9eZHAgYnL4sYRlrJ7Wj9kH4rOzLDF3q8unVbGZQb3whBOwg4KM-rBOx2qX_bIXJ5D6CjKY63Og3_kae2drOyy=s590"><img alt="" border="0" data-original-height="418" data-original-width="590" src="https://blogger.googleusercontent.com/img/a/AVvXsEgwoQDWfPeFtaAqs9Y4V-a70BVaJ5ip_-8bPJO3_I1y53y5PCEP9LUyJ8S4C3Ui1MFbB4GUyLIJeRvH03_GqJFagfJNmIA9YqWtyxC9eZHAgYnL4sYRlrJ7Wj9kH4rOzLDF3q8unVbGZQb3whBOwg4KM-rBOx2qX_bIXJ5D6CjKY63Og3_kae2drOyy=s16000" /></a></p>
<p>From the above image we can see that we have added a header element inside our body.</p>
<div>
<p>Inside the header tag, we have created two elements, 1 is an anchor element which will be used as a placeholder for the logo for our website.</p>
<p>The other element inside the header is the nav element. Nav elements are usually kept for adding menu to the navigations.</p>
<p>Inside the nav we have an unordered list and a few elements inside it defining the pages that we want the user to navigate to using anchor elements.</p>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEga-nIaPnVd7Vkv20qq1oUm-IXDVeRmfPBYrq6AgiOxqKnj8CnGonc4G2Y9ufrbznGXnnJESnePJk3WN7jnXBxGHMXz419jqwnA3Tf9jaEQnWAWMiyzpCpd8JyJI3w_nYeswviLz8seuFFKujNzQAmNaNNdR53Erd0Jfn7POm_NYNDVAcAkbK0Z14z7=s597"><img alt="" border="0" data-original-height="245" data-original-width="597" src="https://blogger.googleusercontent.com/img/a/AVvXsEga-nIaPnVd7Vkv20qq1oUm-IXDVeRmfPBYrq6AgiOxqKnj8CnGonc4G2Y9ufrbznGXnnJESnePJk3WN7jnXBxGHMXz419jqwnA3Tf9jaEQnWAWMiyzpCpd8JyJI3w_nYeswviLz8seuFFKujNzQAmNaNNdR53Erd0Jfn7POm_NYNDVAcAkbK0Z14z7=s16000" /></a></p>
This is how our HTML looks like in a browser till now.
<p>The next step is to add some CSS styles to these elements that we have created so that our website looks the way we want it to look.</p>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjIyIYFmeofjJ5YL_7_m7oMppFeK9HvSQpTtNkZGUgvBYHUZ1Tk67Vz4h3v--BGw_WvFQy5c_NUlCVjO2cszIc2DjCQqkMH8DYkBbvkPilJxsZBSGst_y6n-Sr_c1IF7YWQBmKPmpr20Uw22Vm1VXPAZhL1xAHB90G6WvRtrtAdxw9aXQ3uWkCS-Peq=s1250"><img alt="" border="0" data-original-height="245" data-original-width="1250" src="https://blogger.googleusercontent.com/img/a/AVvXsEjIyIYFmeofjJ5YL_7_m7oMppFeK9HvSQpTtNkZGUgvBYHUZ1Tk67Vz4h3v--BGw_WvFQy5c_NUlCVjO2cszIc2DjCQqkMH8DYkBbvkPilJxsZBSGst_y6n-Sr_c1IF7YWQBmKPmpr20Uw22Vm1VXPAZhL1xAHB90G6WvRtrtAdxw9aXQ3uWkCS-Peq=s16000" /></a></p>
The first thing we will do, and this is totally optional is to add a font to your website. In this example, I am using Google Quicksand Font. The usage of the font is explained in the image above.
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiOBEeC6tKejHUikrSASeYu3m-RU1njzc5z0vbuNWqIPokjxBXoLnkmdfOsf63n76a6KodZvnmSh8kZztxmCf_RgXdbvqU2mNzQEyGZTGt1tgXVtRUbavZHygO0jaq3YFB1zEo4W_tW1NEXdX9awBeWnCcM90fyCkt_XzZhX5xRJ1hyyJCuyRR-sNjG=s408"><img alt="" border="0" data-original-height="372" data-original-width="408" src="https://blogger.googleusercontent.com/img/a/AVvXsEiOBEeC6tKejHUikrSASeYu3m-RU1njzc5z0vbuNWqIPokjxBXoLnkmdfOsf63n76a6KodZvnmSh8kZztxmCf_RgXdbvqU2mNzQEyGZTGt1tgXVtRUbavZHygO0jaq3YFB1zEo4W_tW1NEXdX9awBeWnCcM90fyCkt_XzZhX5xRJ1hyyJCuyRR-sNjG=s16000" /></a></p>
By adding the above css code, we give our header a display property of flex and make the alignment for the header. After these above css changes the header looks like this.
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgelaySKuGN6ZxDNLjnZK-N3p32q3KEW86l5JEKxlbpD6gVUJxGRXhXlEsa-Iqj43GYufbMbLJd9W-SdeY9isMTiZCt337SQDiGxQEWOhfTPnTTWHPdIMGy-bGnv5jBmkj24vZzh6AygSJTe4Bc2IRawTKhmSDsjce0y3QOhIK104CQwIVCSSbE6Flg=s606"><img alt="" border="0" data-original-height="186" data-original-width="606" src="https://blogger.googleusercontent.com/img/a/AVvXsEgelaySKuGN6ZxDNLjnZK-N3p32q3KEW86l5JEKxlbpD6gVUJxGRXhXlEsa-Iqj43GYufbMbLJd9W-SdeY9isMTiZCt337SQDiGxQEWOhfTPnTTWHPdIMGy-bGnv5jBmkj24vZzh6AygSJTe4Bc2IRawTKhmSDsjce0y3QOhIK104CQwIVCSSbE6Flg=s16000" /></a></p>
<br />Then we add some more styles to the nav and the header as below
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiT7Y0Qvslv_Bm017GkSSVO2k1ctKCFIGfnBRp5_1ixqybT2C4H8AAzcqZogl5RngRLAqCwMnJ-4pQL059rvNjGcFeXuADml0pzsAycyQMCXpsUzPFfZTuLH9bpFVAN7EM7NDa8oN3Y_ICu0j55GKrUA4_bTtzFOUCCuA6POSWLG_euW4wveT3RRREN=s722"><img alt="" border="0" data-original-height="687" data-original-width="722" src="https://blogger.googleusercontent.com/img/a/AVvXsEiT7Y0Qvslv_Bm017GkSSVO2k1ctKCFIGfnBRp5_1ixqybT2C4H8AAzcqZogl5RngRLAqCwMnJ-4pQL059rvNjGcFeXuADml0pzsAycyQMCXpsUzPFfZTuLH9bpFVAN7EM7NDa8oN3Y_ICu0j55GKrUA4_bTtzFOUCCuA6POSWLG_euW4wveT3RRREN=s16000" /></a></p>
<br />This gives the color and styles to the nav and header.
<h2>The Final Look</h2>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjUDsa5ykofjHcXqWicCWnHWyNURYbDs7-EaXcO0oAof4SWmzAPTOLbOQMyIOEmaJa8pcYtrPqiC6eH3V-6IazU0oyhBVRqTFQUd8GEhuv38MdlcaB-q4nkXEaf6VycLu5PO_ZW_5YpFMeqmVD-GKbqXg1VPPHufqjPvdwEV7OQhQuTwmUd1_Zb74_6=s1670"><img alt="" border="0" data-original-height="411" data-original-width="1670" src="https://blogger.googleusercontent.com/img/a/AVvXsEjUDsa5ykofjHcXqWicCWnHWyNURYbDs7-EaXcO0oAof4SWmzAPTOLbOQMyIOEmaJa8pcYtrPqiC6eH3V-6IazU0oyhBVRqTFQUd8GEhuv38MdlcaB-q4nkXEaf6VycLu5PO_ZW_5YpFMeqmVD-GKbqXg1VPPHufqjPvdwEV7OQhQuTwmUd1_Zb74_6=s16000" /></a></p>
<br />
</div>

## Source Code Available Here
<a href="https://codelikeadev.com/blog/simple-top-navigation-menu-html-css">Top Navigation Bar In HTML CSS Source Code</a>