如何为不同大小的设备使用不同的导航栏类？

Question

This is the current code I'm using, when the screen is scaled down for viewing in mobile devices I want to make the navbar class into a navbar-inverse class

        <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-text">Hello</span>
        </button>

          <div class="collapse navbar-collapse" id="collapse_target">
            <ul class="nav navbar-nav ml-auto" >
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Bio</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Tour </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Videos </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Media </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
    </nav>

I've tried using media queries but I can't select a different class in each query

Answer 1

There are a few ways you can achieve it, here are two of them.

1. Load CSS StyleSheets based on screen size (ex: <link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" /> ). You can define the inverse colors in the new StyleSheet
2. Use @media() queries (Learn how to use them here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries )

Hope this helps.

Answer 2

You can style manage using by a css media query, that will be the fastest and standard way

another solution you can change the class name by javascript or jQuery library

Hope this script will help you, to remove and add class

var targetElement = document.getElementById("demo");

window.addEventListener("resize", myFunction);
window.addEventListener("load", myFunction);
function myFunction() {
  var wWidth = window.innerWidth ;
   if( wWidth < 500 ) {
targetElement.classList.add("below500");
targetElement.classList.remove("above500");
   }else{
targetElement.classList.add("above500");
targetElement.classList.remove("below500");
   }
}

Answer 3

I have created a quick demo for you. Please check it.

https://codepen.io/rhythm19/pen/GaOVPY

navbar-light bg-light and navbar-dark bg-dark are the main classes to be toggled depending on window size. I have used jquery to toggle classes. You can even use any custom class and override the background and text colors with media query.