How to make this simple navbar menu to collapse with a custom media query ?

Bootstrap Studio Help
1

Hello i created the following simple menu :

HTML PART

<!-- Start: Navigation Clean -->
    <div>
        <nav class="navbar navbar-light navbar-expand-md navigation-clean">
            <div class="container"><a href="#">Alfa Rodos Clean</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span>Toggle navigation</span><span></span></button>
                <div class="collapse navbar-collapse"
                    id="navcol-1">
                    <ul class="nav navbar-nav ml-auto">
                        <li class="nav-item" role="presentation"><a href="#">Main</a></li>
                        <li class="nav-item" role="presentation"><a href="#">About our company</a></li>
                        <li class="dropdown nav-item"><a href="#">Morning Menu</a>
                            <div class="dropdown-menu" role="menu"><a href="#">First Item</a><a href="#">Second Item</a><a href="#">Third Item</a></div>
                        </li>
                        <li class="dropdown nav-item"><a href="#">Evening Menu</a>
                            <div class="dropdown-menu" role="menu"><a href="#">First Item</a><a href="#">Second Item</a><a href="#">Third Item</a></div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <!-- End: Navigation Clean -->

CSS PART

.navigation-clean {
  background: #fff;
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #333;
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 0;
}

@media (min-width:768px) {
  .navigation-clean {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}



.navigation-clean .navbar-brand {
  font-weight: bold;
  color: inherit;
}

.navigation-clean .navbar-brand:hover {
  color: #222;
}

.navigation-clean .navbar-toggler {
  border-color: #ddd;
}

.navigation-clean .navbar-toggler:hover, .navigation-clean .navbar-toggler:focus {
  background: none;
}

.navigation-clean .navbar-toggler {
  color: #888;
}

.navigation-clean .navbar-collapse, .navigation-clean .form-inline {
  border-top-color: #ddd;
}

.navigation-clean.navbar-light .navbar-nav .nav-link.active, .navigation-clean.navbar-light .navbar-nav .nav-link.active:focus, .navigation-clean.navbar-light .navbar-nav .nav-link.active:hover {
  color: #8f8f8f;
  box-shadow: none;
  background: none;
  pointer-events: none;
}

.navigation-clean.navbar .navbar-nav .nav-link {
  padding-left: 18px;
  padding-right: 18px;
}

.navigation-clean.navbar-light .navbar-nav .nav-link {
  color: #465765;
}

.navigation-clean.navbar-light .navbar-nav .nav-link:focus, .navigation-clean.navbar-light .navbar-nav .nav-link:hover {
  color: #37434d !important;
  background-color: transparent;
}

.navigation-clean .navbar-nav > li > .dropdown-menu {
  margin-top: -5px;
  box-shadow: none;
  background-color: #fff;
  border-radius: 2px;
}

.navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item {
  line-height: 2;
  color: #37434d;
}

.navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item:hover {
  background: #eee;
  color: inherit;
}

My question is how can i make the menu to collapse at 980px. Can you please give me an example using media queries to achieve this ?

Thanks !

2

I'm thinking that the BSS Tesla video has a collapsing navbar and I would have also thought that the navbars are collapsing by default.

Are you using the navbar component, or doing something different?

3

"navbar-expand-md" is the class on the nav that controls when the menu collapse occurs.

If you use a custom sass build of Bootstrap 4 you can create a new breakpoint and name it what you like. Then add that name to the navbar-expand-name

Example for a new breakpoint named "mybp"

/* import the necessary Bootstrap files */ @import "functions"; @import "variables";

/* set the overriding variables */

$grid-breakpoints: ( xs: 0, mybp: 400px, sm: 567px, md: 768px, lg: 992px, xl: 1200px, xxl: 1900px );

$container-max-widths: ( xs:0, mybp: 400px, sm: 567px, md: 768px, lg: 992px, xl: 1200px, xxl: 1900px );

@import "bootstrap";

4

Hello thanks for your answers but i dont know sass, i know only css somehow. Can you please show me how can i add a media query to my css code that i posted before so that the menu to collapse at 980px ?

5

Apparently there is no other way, or Twinstream would not have gone to such great lengths to describe an otherwise easy process.

If you don't like the break points then you will have to follow the above process to change them.

Otherwise, the only available solution is to use an available break point or not use bootstrap, but use a different compile available online.

navbar-expand-md: You can change md to lg and use 992px.

6

Thanks PervasiveRichesLL 992 works fine.