Solution 1 :

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

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!

By

Leave a Reply

Your email address will not be published. Required fields are marked *