<div>
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
</div>

<div>
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.
</div>

<div>
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.
</div>

<div>
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 { 
&nbsp; &nbsp; display: none; 
} 
 
And the menu is set with this: 
 
.navbar-expand-md .navbar-collapse { 
&nbsp; &nbsp; display: flex !important; 
&nbsp; &nbsp; 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.
</div>

<div>
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 
 

<pre><code class="code-10 nolinks" id="code-20-42994278-1">/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
 .navbar {
 padding-bottom: 0px;
 }
	
.navbar-collapse a, .navbar-light .navbar-nav .active&gt;.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show&gt;.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;
}

 }
</code></pre>
</div>

jblayney

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

<div>
<div class="content wysiwyg-content">
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. 
 
<a href="http://careers.baffinland.com/" rel="ugc">http://careers.baffinland.com/</a>
</div>
</div>

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/

Make responsive menu appear at different width

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.