How to change navbar background color based on screen size?

user_13101805 0
Viewed 483

On larger screens I have semi-transparent navbar, but when it is collapsed on small screen it is hard to read because the navbar expands on my content, so I would like to change background color of my navbar, but only on sm and xs screens. How can I do this?

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="Przełącznik nawigacji">
    <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 also made my own class but I don't know how I can use this

.small-screen-navbar{
    background-color: rgba(240,240,240,1.0) !important ;
}
bootstrap-5 navbar responsive css html
2 Answers

Please, take a look at the so-called media queries, which are used precisely for these things.

I would use MDN as a reference:

MDN MEDIA QUERIES

For example:

@media screen and (max-width: 480px){
 .small-screen-navbar{
background-color: rgba(240,240,240,1.0) !important;
/*ADD OTHER PROPERTIES */
   }
}

I also noticed that you're using Bootstrap 5 and Bootstrap have breakpoints -

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. Bootstrap - Breakpoints

user_148729330

Use a media query for the sm breakpoint at 768px...

@media (max-width: 768px) {
    .navbar {
        background-color: #ffcc00;
    }
}

Demo

user_1714560
Related