In today’s mobile-first world, it’s more important than ever to ensure that your website is optimized for all devices, including smartphones and tablets. One of the most critical elements of any website is the navigation menu, which allows users to find the content they’re looking for quickly and easily. In this tutorial, we’ll show you how to create a responsive navigation menu using HTML and CSS.
Step 1: Set up your HTML structure
The first step in creating a responsive navigation menu is to set up the HTML structure for your menu. This involves creating a list of links that will be displayed in your menu. You can do this by using the HTML unordered list element <ul> and the list item element <li>. Here’s an example of what your HTML might look like:
<!DOCTYPE html>
<!-- Created By Mr. Geek - www.wphotshot.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Navigation Menu | WPHotShot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo"><a href="http://wphotshot.com"><img decoding="async" src="https://wphotshot.com/wp-content/uploads/2023/04/Batman.png" alt="Site_logo"></a></label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<section></section>
</body>
</html>
Step 2: Style your menu with CSS
Once you’ve set up the HTML structure for your menu, it’s time to style it using CSS. The first step is to add some basic styling to your menu, including a background color, text color, and font size. Here’s an example of some CSS that you can use to style your menu.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
background: linear-gradient(to right, #0082e6, #00A5B2, #7209D4);
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 73px;
padding: 0 100px;
font-weight: bold;
}
img{
height: 65px;
vertical-align: middle;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #00A5B2;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #00A5B2;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
font-weight: 700;
}
a:hover,a.active{
background: none;
color: #7209D4;
}
#check:checked ~ ul{
left: 0;
}
}
It has responsive code that will allow your menu to work on any device. One of the most common responsive design features for navigation menus is the “hamburger” icon, which is a small icon that opens and closes the menu when clicked.
It also includes a media query that targets devices with a screen width of 600px or less. Within this media query, the CSS code hides the main navigation menu and displays a new menu that’s positioned at the top of the screen.
Step 3: Test your responsive navigation menu
Once you’ve added your HTML, CSS, and JavaScript code, it’s time to test your responsive navigation menu on different devices. You can use tools like Google Chrome’s Developer Tools to test your menu on different screen sizes and see how it looks and functions.
Conclusion
Creating a responsive navigation menu using HTML and CSS is essential for any website that wants to provide a seamless user experience across all devices. By following the steps outlined in this tutorial, you can create a navigation menu that looks great and works well on any device. Remember to test your menu thoroughly and make adjustments as needed to ensure that it’s fully responsive and functional. With a well-designed navigation menu, you can improve user engagement and help your website stand out from the competition.
