When my navbar collapses on smaller screens, it becomes hard to read due to the expansion over my content. I want to change the background color of the navbar only on small and extra-small screens. How can I achieve this?
This is my HTML code:
<nav class="navbar navbar-expand-xl navbar-light ">
<a class="navbar-brand d-flex align-items-center" href="/">
<a class="navbar-brand" href="/"><img src="img/cattery/full_trimmed_transparent_base (3).png" width="381"height="76" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/s"> S</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o"> O ...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> ...</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> ...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> ...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> ...</a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/Hodowla-...>
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
I have created my own class but unsure how to apply it:
.small-screen-navbar{
background-color: rgba(240,240,240,1.0) !important ;
}