Looking to style the mobile (hamburger) menu with CSS specifically for that view. Using @media screen and (max-width: 600px) seems like a messy solution to target only the mobile menu. Is there a way to create a style that applies solely to the mobile menu? For example:
.mobile-menu .nav-link {
color: red;
padding: 40px;
}
This would make only the mobile menu have red text and padded to 40px, while keeping the desktop menu unchanged. If there isn't a predefined style, what is the best approach to styling CSS exclusively for mobile menu items?
To provide context, here is the HTML code snippet:
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img class="img-fluid d-md-none" src="images/banner_logo_small.png">
<img class="img-fluid d-none d-md-block" src="images/banner_logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COMMUNITY SUPPORT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
And the corresponding CSS code:
.navbar {
background:#FF8200;
padding: 0;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
padding: 0;
}
.nav-link {
margin-right: 1em !important;
font-weight: bold;
}
.nav-link:hover {
color: #3D3935;
}
.navbar-collapse {
justify-content: flex-end;
}
.d-md-none .navbar-collapse {
padding: 200px;
color: red;
}
The goal is currently to apply a padding of 200px and turn the text red for mobile menu items. You can experiment with a sample at , aiming to make mobile menu items red while keeping them white in desktop view.
The challenge lies in Bootstrap using the same items for both mobile and desktop menus, changing the appearance based on page width.