To create a responsive navbar with icons using HTML and CSS, you can follow these steps:
Create the HTML structure for the navbar. This can include a logo, a list of links, and icons for social media links.
php
Copy code
<header>
<nav>
<div class="logo">
<img src="logo.png" alt="Logo">
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</nav>
</header>
 |
| How TO Create Responsive Navbar with Icons, Using HTML And CSS |
Style the navbar using CSS. You can use flexbox to make the navbar responsive and align the elements. You can also add styles for the icons.
css
Copy code
header {
background-color: #333;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.logo img {
height: 50px;
}
.nav-links {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links li {
list-style: none;
margin-right: 20px;
}
.nav-links a {
color: #fff;
text-decoration: none;
}
.social-icons {
display: flex;
justify-content: space-between;
align-items: center;
}
.social-icons a {
color: #fff;
margin-right: 10px;
}
.social-icons i {
font-size: 20px;
}
Add media queries to make the navbar responsive. You can adjust the styles based on the screen size.
css
Copy code
@media screen and (max-width: 768px) {
nav {
flex-direction: column;
align-items: flex-start;
}
.nav-links {
flex-direction: column;
margin-top: 20px;
}
.nav-links li {
margin-right: 0;
margin-bottom: 10px;
}
.social-icons {
margin-top: 20px;
}
}
This will create a responsive navbar with icons using HTML and CSS.
Post a Comment