Make responsive menu appear at different width

jblayney
jblayney used Ask the Experts™
on
Hello,

Currently my responsive menu will appear at 768px, I want to change it to appear at 993 and I cant find it anywhere in my css or bootstrap navwalker code.

http://careers.baffinland.com/
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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

Author

Commented:
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.

Author

Commented:
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.
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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.

Author

Commented:
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;
}

 }

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
In the code above, you set it to display none above 768px, so it's not going to show at that size:

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

Just had another thought which will be a lot easier. Just change the class of the navigation from navbar-expand-md to navbar-expand-lg. Then it will use the built-in bootrap breakpoint for large devices (992px) instead of for medium (768px):

<nav class="navbar navbar-expand-lg navbar-light bg-nav-bar" role="navigation">

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial