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

@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; }{ display:block !important; } }

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.


Edwin is the CEO of Laman7, also our designer and web developer. He writes about Growth Hacking tactics, digital marketing, a bit of programming and design. He is obsess with growth (trees, revenue, profit, anything) and is outcome driven. Edwin is a cyclist, tree hugger and minimalist.

Leave a Reply

Start getting free help.

One email. Once a week (maybe). Get the most important digital marketing insights delivered to your inbox.