Change the default responsive navbar breakpoint
Yes, you can do it by redefining @navbarCollapseWidth
variable in less/variables.less
file. And recompiling css after that.
Compiling instructions can be found in Compiling Bootstrap with Less section of official documentation.
Change bootstrap navbar collapse breakpoint without using LESS
You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.
Change Navbar breakpoint in Bootstrap 3.3.2
Which version of bootstrap are you using? 3.1? Anyway, I need as well your css to help you to fix it, but generally:
@media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
The max width is the breakpoint. Copied from Bootply (with demo included there).
Bootstrap - Change breakpoint navbar?
Bootstrap 5.0
Bootstrap 5 still uses the navbar-expand*
classes to determine the Navbar's collapse breakpoint. There is now an additional navbar-expand-xxl class.
Bootstrap 5 - Navbar Tiers
Bootstrap 4.0.0
Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-*
classes. If you exclude navbar-expand-*
the mobile menu will be used at all
widths. Here's a demo of all 6 navbar states: Bootstrap 4 - Navbar Tiers
Also see:
Change bootstrap navbar collapse breakpoint without using LESS
Change Bootstrap's mobile navbar breakpoint
You should also target .navbar-nav .open .dropdown-menu
Try to add something like this:
@media (max-width: 992px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
Example here https://jsfiddle.net/8zne82d2/9/
How to change navbar collapse threshold using Twitter bootstrap-responsive?
You are looking for line 239 of bootstrap-responsive.css
@media (max-width: 979px) {...}
Where the max-width
value triggers the responsive nav. Change it to 550px or so and it should resize fine.
Related Topics
Form Padding Differences in Firefox and Opera/Chrome/Ie
How to Create a Calc Mixin to Pass as an Expression to Generate Tags
What Is Difference Between CSS Em and Ch Units
How to Find Unused CSS in a Website
How to Make CSS Width to Fill Parent
How to Remove an Element from the Flow
How to Gulp-Watch Multiple Files
User Agent Stylesheet Overriding My Table Style? Twitter Bootstrap
How to Reset CSS3 *-Transform: Translate(…)
React Rtl. Conditional Import CSS
Use Variable Defined in Config.Rb in SCSS Files
Make a CSS Triangle/Arrow Grow When Its Parent Div Is Resized
Opera and Custom Cursor in CSS
How to Add a Company Logo to Shinydashboard Header (Not Mainpanel or Mainheader)
On the Web, What Fonts Should I Use to Create an Equivalent Experience Cross-Platform
How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width