Customize Bootstrap Breakpoint for Show/Hide Nav Icon

Table of Contents

1. Introduction
2. Change the Screen Size Variable
3. Use Bootstrap Live Customizer
4. Conclusion

Introduction

The default Bootstrap nav breakpoint to show the hamburger icon is 760px. If you want to change it, following is the setting you can use to customize Bootstrap. The following screen example shows how to show or hide the nav icon at 1024px.

Change the Screen Size Variable

Just change the @screen-sm size.

Use Bootstrap Live Customizer

If you want to customize Bootstrap, the easiest way is to go to http://bootstrap-live-customizer.com/ and get the variables.less and bootstrap.css.

Because if you just get the customized bootstrap.min.css, it will be hard to maintain what has been customized.

Conclusion

Customizing the Bootstrap nav breakpoint is as simple as changing the @screen-sm variable. Using a live customizer tool makes it easy to preview and export your changes while keeping them maintainable.