Simple Top Navigation Menu Using HTML and CSS — [With Source Code]
Every website needs some sort of navigation so that users coming onto this web page can easily navigate between the pages of the website.
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?
Well wherever you place it, these navigation menus or navbar menus are really an essential part of a website.
Creating them from scratch can not be so straightforward when you are just starting with HTML and CSS coding.
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.
Creating The Folder Structure For Website
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.
Once the folder is open in visual studio code, I will create two files, an index.html and a style.css file.
Creating The HTML Structure
We will start by creating the basic HTML structure for our website.
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.
Then we will link our style.css to the HTML page.
Then we will go ahead and add some elements to our body of the website.
From the above image we can see that we have added a header element inside our body.
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.
The other element inside the header is the nav element. Nav elements are usually kept for adding menu to the navigations.
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.
This is how our HTML looks like in a browser till now.
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.
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.
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.
Create a Vertical or Horizontal CSS Navigation Bar Easily
TL;DR – CSS navigation bar is a list of links that help users navigate to different parts of web sites.
Contents
CSS Navigation Bar: Main Tips
- Navbar in CSS refers to a group of links that lead to different pages of a web site.
- Navbars are either vertical or horizontal.
- The <nav> element should wrap primary bars such as the main navigation links of web sites.
Defining Navbars
A CSS navigation bar is a collection of links. This example shows a functional and styled navigation bar:
HTML creates the base of a navbar with two elements:
-
(defines an item of a list) (defines an unordered list)
- Ordered
- list
- Unordered
- list
In these examples, HTML list elements create the functional part of navbars:
It is necessary to remove the browser default settings for navbars:
- list-style-type: none removes the bullets from CSS navigation bars.
- margin: 0; and padding: 0; removes the browser default spacing settings.
- These properties are for both horizontal and vertical navigation bars.
In the example, we remove padding, margins, and the bullets from the list:
<nav> Element
The <nav> element indicates that a group of links are for navigation. However, placing the ordered or unordered lists in this element is not a requirement.
Tip: you should place your navigation bar in <nav> for major bars.
Vertical Navigation Bar
The vertical navigation bar appears as a regular list of links. The vertical bar is useful for web navigation and can easily become a dropdown menu.
Here are some points about the example above:
- Remember to remove the default browser styles (margin, padding, bullet points).
- Add text-decoration: none; to remove the underline.
- Add various properties to customize the CSS vertical navigation bar.
- The :hover selector indicates that when the mouse cursor moves over a link in the CSS navbar, the background color changes.
Ways to Style Vertical Navbars
Styling properties can make CSS navigation bars match various web designs. You can experiment by adding different background colors, changing the font family or the text alignment.
This example creates a vertical navigation bar. However, styling properties change when :hover triggers:
Active Navigation Links
You can add styles to a CSS navigation bar when users click on one of the links. You should use the :active selector to indicate the state for which the new styling rules should apply:
Centering Links & Adding Borders
The text inside the CSS navigation bar appears on the left side by default. You can easily change this rule by adding text-align:center to make sure that all links appear at the center of the navbar.
Note: set text-align property to left or right to move the text to those directions.
It is possible to separate the CSS navigation menu from the rest of the website by adding borders.
This example adds borders and centers the text:
Fixed Height of a Vertical Navbar
You can set the CSS navigation bar to be on the specified side and continue until the end of the page:
- Set the height to 100%.
- Indicate the permanent position with fixed .
- Add overflow: auto to insert a scrollbar to the navigation bar.
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Horizontal Navigation Bar
CSS creates horizontal navigation bars by:
- Assigning display: inline property to a list of links.
- Using float.
Inline List Items
CSS builds a horizontal CSS navbar with the display:inline property assigned to <li> elements.
Tip: <li> elements are block elements by default. The inline value displays links a row instead of new lines.
Floating List Items
The second way of creating a horizontal navbar is the float property. It sets the layout for navigation links by floating the <li> elements.
The float property can use two keywords: left or right .
In the example below, we create a CSS navigation bar by using float: right :
In the example, one of the links moves to the right with the float:right :
Hovering Over Horizontal Navigation Bar
This example adds :hover to the horizontal navigation bar in order to change the background color when cursors enter it:
Active Navigation Links
This example adds the :active selector to change the styling of the link when users click on it:
Adding Borders
CSS borders add a visible separation between the navbar and the rest of the content.
Fixed Position
You can make the CSS navigation bar permanently stay at the bottom or the top of the page regardless of scrolling.
position: fixed and top: 0 create the navigation bars that are fixed at the top:
position: fixed and bottom: 0 create navigation bars that are fixed at the bottom:
Responsive Navigation Menu Bar in HTML CSS
Hey friends, today in this blog you’ll learn how to create a Fully Responsive Navigation Menu Bar using only HTML & CSS. In the earlier blog, I have shared how to create a Responsive Sidebar Menu using HTML & CSS and now it’s time to create a navigation bar in HTML.
As you know the Menu Bar or Navigation Bar (Navbar) is important for any kind of website. Many websites have a responsive navbar or a responsive navbar with a dropdown menu. Essentially, responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width and prevents visitors from mobile devices from needing to do extra work to read your content.
In our design (Responsive Navigation Bar), as you can see in the preview image, there is a horizontal navigation bar or navbar with a logo on the left side and some navigation links on the right side. This is a very simple navigation bar and it is created using only HTML & CSS.
The best part about this navigation bar is, it is fully responsive for any kind of device including mobile phones. On the pc, this navigation bar displayed in a horizontal line but on mobile devices, this navbar or navigation bar displayed in a vertical line. On the mobile, you have the option to show or hide the menu bar by clicking on the hamburger menu icon.
Video tutorial of Responsive Navigation Menu Bar
In the video tutorial, you have seen this is a pure CSS responsive navigation bar and I’ve used CSS @media property to make this navigation bar fully responsive for mobile devices. If you like this responsive navigation bar and want to get source codes of this program then you can easily copy the codes of this tutorial from the given copy boxes or you can also download the code files of this navigation menu bar.
If you’re a beginner and you know a little bit of HTML & CSS then the codes and concept of this responsive navigation menu bar will definitely help you to understand HTML & CSS more. This is a very simple responsive navigation bar with few and clean codes.
You might like this:
Responsive Navigation Menu Bar [Source Codes]
To create this responsive navigation bar. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this responsive navigation menu bar from the below download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
That’s all, now you’ve successfully created a Responsive Navigation Menu Bar using HTML & CSS. If your code doesn’t work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Responsive Navigation Bar | HTML, CSS & JS
Hey everyone! Welcome to today’s tutorial. In today’s tutorial, we will learn how to create one of the essential parts of any website i.e the navigation bar. Creating a responsive navigation bar is a tricky thing for many developers.
So in this tutorial, we will learn how to create a responsive tutorial using some quick and easy steps. Though it might seem daunting to look at, I assure you it is super easy. To create this responsive navigation bar we need HTML, CSS and just a little bit of Javascript. Let us get started with the tutorial.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. So if you are interested to learn along with the video tutorial you can check out the video down below. I post new tips and tutorials on my channel every alternate day. So be sure to subscribe so you don’t miss any of this exciting stuff.
Project Folder Structure:
Now before we start coding, let us create the project folder structure. We name the project folder as – Responsive Navbar. Inside this folder, we have three files – index.html, style.css and script.js.
The first file is index.html which is an HTML document. Next, we have the stylesheet named style.css. And finally, we have the script file we have named script.js. Now that our folder is ready we can move on with the coding.
HTML:
We start with the HTML section. First, copy the code below and paste it into your HTML document. This creates the basic layout of the navbar.
CSS:
Now that the basic layout is ready. We add style to the navbar using CSS. For this copy, the code provided below and paste it into your CSS file. We make the navigation bar responsive using media queries. The three breakpoints for media queries used in this tutorial are at max-width: 991px, max-width: 767px, max-width: 575px.
Javascript:
Finally, we add functionality to the ham menu using Javascript. This enables users to open and close the side nav by simply clicking on the menu bars. Now copy the code provided below and paste it into your script file.
That’s it for this tutorial. If you have any issues while creating this project, you can download the source code by clicking on the download code button below. Also, don’t forget to drop your queries, suggestions and feedback in the comments below.
Happy Coding!