Use @media query syntax:
@media screen and (max-width: 600px) {
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
color: #000; }
}
See MDN for more
Solution 1 :
Problem :
I’m attempting to customize a navbar using Bootstrap 4.2.1. I’ve managed to customize everything except the color of the HOVER link text that appears under the hamburger menu (on a small viewport). In a wider viewport, the CSS below does the trick to specify the link’s hover color. What am I missing to be able to change the hover link text on a small viewport?
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
color: #000; }
Comments
Comment posted by Media Queries: How to target desktop, tablet, and mobile?
Does this answer your question?
Comment posted by RJF
Thank you for the suggestion. While implementing it, I discovered that I had another set of styles buried deep in the CSS at another media query that was preventing the navbar from styling the way I wanted. So you pushed me right where I needed to go. Thanks!