menu-collapse

Bootstrap by Twitter is one the best framework out there. In today’s topic, we’ll be talking specifics about the break point of Nav Bar menu in mobile. Naturally, it will break at 768 pixel width. There are times where we need to change the break point of the Nav Bar using Bootstrap 3.3. This is maybe due to

  • Ecstatic – It looks awful when the menu is crowded
  • Long Menu – Especially for those project where you can’t really negotiate to reduce
  • Love For Burger Menu – Some are weird like that.

What ever the reason is, it’s not that hard to change the break point of Nav Bar.

menu-burger

Step 1 – Don’t Hack the Bootstrap

The title says it all. Don’t hack the bootstrap.min.css or bootstrap.css. This will case problem in the future when upgrading to a newer version of Bootstrap. It’s best to use your own stylesheet to edit it. Make sure it’s loaded after Bootstrap.

Step 2 – Copy the Code Below

[crayon] @media (max-width: 1024px) {
.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;
}
}
[/crayon]

Step 3 – Paste the Code into Your Style Sheet

As mentioned earlier, the codes should be loaded after Bootstrap, this will overlap Bootstrap.css. You also need change the 1024px to your desired breakpoint.

One thought on “Change the Break Point of Nav Bar Menu in Bootstrap 3.3

Leave a Reply

Your email address will not be published. Required fields are marked *