Change the Break Point of Nav Bar Menu in Bootstrap 3.3

by Edwin, written on May 3, 2016 | #bootstrap3.3 #technical


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.


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

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.

Author: Muhammad Edwin Masripan

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.


1 Response

Ask a Question or Leave a Reply

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