Download bootstrap navbar only?

Okay..... Problem solved! Adrian missed just one selection (component animations). ... the nav bar in mobile was always open, rather than being 'click to open'. Thanks though to Adrian for the starting point.

I did it the hard way.... trial and error.

To gain minimised script & css files, that allows the nav bar to work in both desktop, and mobile display formats... ... you need to check the following boxes:

Common CSS

  • Grid System
  • Forms
  • Buttons
  • Responsive Utilities

Components

  • Navs
  • Navbar

Javascript Components

  • Dropdowns
  • Component animations (for JS) (includes Collapse)

JQuery Plugins

  • Dropdowns
  • Collapse

Bingo!

Bloody marvelous!!!!!


For a complete navbar like the image below,

Normal

Bootstrap NavbarCollapsed

Collapsed

Go to this link - getbootstrap.com/customize

Once there, uncheck all the checkboxes except for the following:

Common CSS

  • Grid System
  • Forms
  • Buttons
  • Responsive Utilities

Components

  • Navs
  • Navbar

Javascript Components

  • Dropdowns

jQuery Plugins

  • Dropdowns
  • Collapse

Click the compile and download button at the bottom of the page.

Or just download the customize I made.

Customized Bootstrap Download Link

Offline Demo (Download First)


Bootstrap 4

If you're using Bootstrap 4, and couldn't find the "Bootstrap Customize", there's an alternative called Bootstrap Theming

Here are the minimum required SCSS files to get Navbar to work:

 // Required (Must-have for any SCSS file(s) to work)
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 
 // Bootstrap Navbar Styles
 @import "node_modules/bootstrap/scss/reboot"; // Bootstrap Normalize (If you don't need normalization, delete it)
 @import "node_modules/bootstrap/scss/grid"; // You can get rid of it, the layout will get worse on Mobile, but you can fix it
 @import "node_modules/bootstrap/scss/nav";
 @import "node_modules/bootstrap/scss/navbar";
 @import "node_modules/bootstrap/scss/dropdown";
 @import "node_modules/bootstrap/scss/transitions"; // When click on Mobile Button Menu Toggle, the menu gets collapse/uncollapse

Tags:

Javascript

Html

Css

Jquery

Twitter Bootstrap 3

Recent Posts