Navbar of any website is the entry door of any website. Users navigate around the webpage clicking on the hyperlinks provided in the navigation menu of any website. The navigation menu needs to be user-friendly so that users don't need to face hassle to explore the website. Mobile users are increasing every day. Most of the users nowadays browsing the website from their mobile devices every day. So making a navbar mobile-friendly is a must-do job for any web developer. We have to ensure that the responsive navbar looks as neat as it can be for small devices.
In this blog, we are creating a simple navigation menu with a responsive look for small devices. I have used plain HTML and CSS for this project. No javascript or jquery was used during the whole process. Previously I have shared a couple of HTML CSS based snippets, and you can check those as well.
Let's start with HTML markup for this project. First of all, we will take a div element with the name of 'menu-area.' then, we will take an input checkbox element with an id of 'custom-menu.' inside the body tag. Below the input element, we will take a label of the class name 'btn-area' and placed a font-awesome bars icon in it. Finally, we will create an unordered list with five nav items for the navigation menu.
You may also like:
- Bootstrap 4 Homepage with Navbar and Slider
- Responsive Pricing Table Design
- Create responsive Homepage using HTML CSS
Let's start the CSS styling. First of all, we will eliminate the document's default margin padding by providing margin and padding of zero to the universal selector. I also provide text-decoration,list-style, and box-sizing value to work for every element of the project. I have used late as the primary font, but you can use whatever google free fonts you want while modifying this project. I gave the 'menu-area' div a blackish background and a height of 62px, a width of 100%. After that, I adjusted the logo giving it a particular line-height and padding. I used the float property to move the ul to the right side. I made some adjustments for the li element by giving them display, line-height, and a margin value. i styled the anchor tags by giving them a color,font-size,padding,text-transform and a font-weight value. I set a hover effect for each element by giving them a dark sea green background color and a transition value so that the hover effect occurs smoothly. After that, I styled the 'btn-area' div, which we will use for the responsive navbar. Initially. for the large devices, this hamburger icon will remain hidden. For this reason, we will give it a 'display: none' property. I have applied other necessary style to make sure it remains in the top right corner of the webpage. i also set 'display:none' property for the 'custom-menu' div id.
For the responsive outlook, I first set the 'btn-area' div element to 'display: block.' then I provided the ul element a position fixed vale and another necessary styling like background-color, width, height, top, left, transition, and text-align value. After that, I gave the 'display: block' value to the li elements to show perpendicular in the small devices. Initially, the 'custom-menu' div will be 'left: -100%', but as I have set it to 'left:0' for the 'checked' state, the navbar will appear from the left whenever we will click on the hamburger icon. Without explaining further, I am providing the code so that you can have a look.
Responsive Navigation Menu Bar in HTML CSS ( Source Code )
For the creation of this project, you need to create two files. One is HTML, and the other one CSS. Use font-awesome CDN because we are using a font-awesome icon for the responsive view. After creating the files, please copy the code down below and paste it into your project.
ADD HTML
ADD CSS
Hello,
ReplyDeletecan you tell me how to use it?
I want to work Web
my web site how to upload googel
ReplyDeletePost a Comment
Please Do not Enter any spam link in the comment box