Make responsive menu appear at different width

Hey there,

Bootstrap uses a variables file to define the breakpoints. These breakpoints are then used through the source SCSS (SASS) files and are converted to CSS when you compile the source files. The CSS file you're using on your site is the minified Bootstrap file, so it's not going to be straight forward to edit that.

The proper way to do it would be to override the variables file with your own settings and re-compile / minify your SASS. Have a look at the variables.scss file and you'll see a couple of variables that define the breakpoints - specifically $grid-breakpoints and $container-max-widths.

This may be tricky if you don't already have the necessary build files set up

Hello,
is there not some way I can override this in my own theme CSS? as long as I know the class it shouldn't matter.

when adding colour and styles to the menu, I am constantly grabbing code from the _navbar.scss file through inspect element, pasting into my theme style.css and applying the overrides.

Sure you can, but it's a little more compliated that just applying some colours. You need to take into account the media queries. Basically, your Responsive menu is made up of 2 parts - the normal menu, and the Hamburger menu. The CSS uses media queries to hide one and show the other, depending on the width of your screen.

The toggle button is set with this:

.navbar-expand-md .navbar-toggler {
    display: none;
}

And the menu is set with this:

.navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}

They're both set using a min-width: 768px media query. You'd need to add in your own for your own breakpoint, but also make sure you add in another one to prevent the default 768px breakpoint.

ok thanks, we are getting close.

I got it to display correctly now, the only problem is that it wont open between 768 and 992 pixels

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .navbar {
        padding-bottom: 0px;
    }
	
.navbar-collapse a, .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
font-size: 16px;
}
	
	.navbar-expand-md .navbar-toggler {
    display: block;
}

.navbar-expand-md .navbar-collapse {
    display: none !important;
  
}
	
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

.navbar-expand-md .navbar-toggler {
    display: none;
}

.navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}

 }

Select allOpen in new window

I thought of that too, but I was messing it in the CSS, not the header..