If you are not familiar with this structure of a navigation bar in HTML, take a look at this article.īelow the header, we have some dummy text inside the element. Inside the body, we have the header and navigation elements. Curabitur non ex elementum, pretium enim ut, ornare ipsum. Maecenas aliquam est a ligula scelerisque, in aliquam neque sodales. Nunc elit tellus, sollicitudin ac accumsan ut, egestas et dui. Phasellus nec nunc malesuada, aliquam massa ac, accumsan metus. Maecenas congue dapibus nulla, eu gravida orci consequat eu. Sed viverra ante in mauris finibus dapibus. In consequat libero eget magna commodo, quis pharetra tellus pretium.

Add the following to your index.html file: Navigation bar DEMO Home About Pricing Terms of use Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Let’s get going and fill them up! The HTMLĪs you know, the HTML is the start of any website. To get started, create a new project folder and create blank index.html and style.css files inside. Especially in tutorials like this, it will be fun to code along. I recommend that you follow along in each of my tutorials - it will really help you learn and grasp the concepts faster. I’ll be using the term “nav-bar” in this article, but just know that they are basically the same. Lol, this sounds like the start of a legal agreement 😂įor the purposes of this article, a navigation bar (nav-bar) is the same thing as a header. Learn how to code and style one in this article! The final product You can find navigation bars on almost any website on the internet.

Images of cool navbar icons png