0

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; }
RJF
  • 39
  • 7
  • Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – casraf May 07 '20 at 21:00

1 Answers1

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

casraf
  • 21,085
  • 9
  • 56
  • 91
  • 1
    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! – RJF May 07 '20 at 23:02