Bootstrap navbar collapse media-query on custom width
You can change the collapse point in 3.1 like this..
@media (max-width: 992px) {
.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;
}
}
http://www.bootply.com/120951
In Bootstrap 4, changing the breakpoint is easier. See this answer
Bootstrap Navbar collapsing at custom width with showing icon
If you give lg , sm, xs or xl after navbar-expand class navbar expands automatically by it's custom value. For example if you write navbar-expand-lg value to the nav class it collapses at 992px width or if you give navbar-expand-md it collapses at 768px. You can inspect codes below . I hope it works for you.
button.navbar-toggler {
background-color: white;
}
span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(41,41,41, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<title>Bootstrap</title>
</head>
<body>
<nav style="background-color: black;" class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Logo Example</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">AAA</a>
<a class="nav-link" href="#">BBB</a>
<a class="nav-link" href="#">CCC</a>
</div>
</div>
</nav>
</body>
</html>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.
Collapse/Toggle Bootstrap navbar at specific width
I found this as I was looking for the same solution.
UPDATE for Bootstrap 3.1
@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;
}
}
This customization works well. Instead of 1200px write your custom size (880px). If you would like to read the whole text here is the link
https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
Modify width to wrap navbar on bootstrap menu
You will have to change bootstrap navbar breakpoint , there is already a solution to this check out this link
Change Navbar breakpoint in Bootstrap 3.3.2
Bootstrap collapsing menu stays on in after changing media query
I changed your css-code for small-screen to css-code I used before and it worked fine, of course, I put your properties for li a span:
@media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-default .navbar-nav>.active>a,
.navbar-nav>li>a {
padding-top: 5px;
padding-bottom: 5px;
color: #727272;
width: 500px;
border-left: 5vw solid #178ACC;
height: 40px;
font-size: 16px;
color: #f4ebeb;
background-color: #000;
}
.navbar-default .navbar-nav > li > a > span {
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-left: 2px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
jsfiddle-link
How to make Navbar collapse from 1024 pixel screen size
Use the following css code and give the value as you wish. This will give the breakpoint to the collapsed menu.
Updated.
I added an extra class to each place .navigatsioon . Then it worked
@media (max-width: 1024px) {
.navigatsioon ul.nav.navbar-nav {
margin-left: -15px;
}
.navigatsioon .navbar-header {
float: none;
}
.navigatsioon .navbar-left,
.navbar-right {
float: none !important;
}
.navigatsioon .navbar-toggle {
display: block;
}
.navigatsioon .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navigatsioon .navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navigatsioon .navbar-collapse.collapse {
display: none!important;
}
.navigatsioon .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navigatsioon .navbar-nav>li {
float: none;
}
.navigatsioon .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navigatsioon .collapse.in {
display: block !important;
}
}
.navbar-nav.navbar-center {
position: absolute;
left: 45%;
transform: translatex(-45%);
}
.navbar .navbar-brand {
padding-top: 5px;
padding-left:150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar navbar-default navbar-fixed-top navigatsioon">
<div class="container-fluid">
<div class="navbar-header navigatsioon">
<button button type="button" class="navbar-toggle collapsed navigatsioon" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-center navigatsioon" rel="home" href="#" title="Buy Sell Rent Everyting" >
<!--<img style="max-width:100px; margin-top: -7px;"
src="//www.google.com/favicon.ico">
-->
<img style=" margin-top: -7px;" src="http://madisonmountaineering.com/wp-content/uploads/2014/03/MM_header_logo.png">
</a>
</div>
<div id="navbar" class="collapse navigatsioon navbar-collapse navbar-responsive-collapse">
<ul class="nav navigatsioon navbar-nav navbar-center">
<li><a href="http://madisonmountaineering.com/about/">ABOUT</a></li>
<li><a href="http://madisonmountaineering.com/#expeditions">EXPEDITIONS</a></li>
<li><a href="http://madisonmountaineering.com/gallery/">GALLERY</a></li>
<li><a href="http://madisonmountaineering.com/#press">PRESS</a></li>
<li><a href="http://madisonmountaineering.com/garrettmadison/">GARRETT MADISON</a></li>
<li><a href="http://madisonmountaineering.com/#contact">CONTACT US</a></li>
<li><a href="http://madisonmountaineering.com/dispatches/" style="color: red !important;">DISPATCHES</a></li>
<li><a href="https://www.facebook.com/MadisonMtng" class="icon_ref"><i class="fa fa-facebook" style="color: #3b5998;"></i></a></li>
<li><a href="https://twitter.com/madisonmtng" class="icon_ref"><i class="fa fa-twitter" style="color: #00aced;"></i></a></li>
<li><a href="https://youtube.com/madisonmtng" class="icon_ref"><i class="fa fa-youtube" style="color: #bb0000;"></i></a></li>
<li><a href="https://instagram.com/madisonmtng" class="icon_ref"><i class="fa fa-instagram" style="color: #5e3e23;"></i></a></li>
<li><a href="https://plus.google.com/madisonmtng" class="icon_ref"><i class="fa fa-google-plus" style="color: #dd4b39;"></i></a></li>
</ul>
</div>
</div>
</div>Bootstrap navbar with desired width and centralized
You can add this CSS
form {
width: auto;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 992px) {
form {
width: 100%;
}
}
form div.input-group {
width: 100% !important;
}
It will increase the size of input on small screens to occupy all remaining space. And on the laptop I gave it width: auto but you can change this to anything you want.
Also, I gave input-group class width: 100% to match the size of form
Hope this helps. If it doesn't come back so we can work it out together :)
Prevent menu from collapsing in 768px display CSS media query
You'll want to read up the section: Using the media queries at the bootstrap site:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2)
http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)
You'll want to use the relevant media queries to override the styles bootstrap adds when your viewport shrinks.
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }
If you don't want the navbar to collapse, remove the 'collapse' from the class name. You should probably get rid of:
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
In short, have a look over the docs, there's a section covering this exact thing titled 'Optional responsive variation' here:
http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)
Related Topics
What Does the Selector [Class^="Span"] Do
How to Prevent :After Pseudo Element from Being Read by Screen Readers
Css3 Box Shadow on Top, Left, and Right Only
How to Get My @Import Stylesheet to Override the Main Stylesheet
What Browsers Support "!Important"
How to Center a List with Bootstrap 4
How to Change Background-Color on Text Links on Hover But Not Image Links
Stop Animation and Start Transition on Hover
Font-Variant: Small-Caps; Shows Different Font Sizes Using Chrome or Firefox
How to Remove Letter-Spacing for the Last Letter of an Element in CSS
When Using Column-Count, Overflowing Content Completely Disappears in All But First Column, Why
Ie11 Triggers CSS Transition on Page Load When Non-Applied Media Query Exists
Anyway to Have a Label Respond to :Focus CSS
CSS Spec - Atomic Inline Level Boxes
How to Change Color of Bootstrap Progress Bar with Custom Color