ed Navbar is a vertical jQuery navbar, which extends Bootstrap 4 for vertical navbar layout and supports multiple sub-levels. It is highly customisable, mobile ready and works with local and external links. ed Navbar is designed with Bootstrap 4 in mind and would adopt any Bootstrap 4 design by default.
A) CSS/SCSS Files and Structure
Index file showcasing ed Navbar v1.0.
- index.html
There are three css files included – css/ed-navbar.css includes Bootstrap’s default styles as well as all styles associated with ed Navbar v1.0 (at the end). There is one .css.map file included – ed-navbar.css.map. File ed-navbar.css within the css directory is the output file of the main scss file ed-navbar.scss within the scss directory and extends Bootstrap’s default theme for a customisable vertical navbar layout. Bootstrap 4.1.3 scss files are included in the bootstrap_scss directory.
File ed-navbar.scss includes multiple SCSS variables to allow for an easy customisation of the navbar. The color and background color of classes .nav-link, .download-item and .navbar-brand are customisable as is the background color of the .navbar class. Spacing options are included too.
- css/ed-navbar.css
- css/ed-navbar.css.map
- scss/ed-navbar.scss
- scss/bootstrap_scss – directory containing a non-modified copy of Bootstrap 4.1.3 scss files
The node_modules directory contains npm dependencies – Bootstrap 4.1.3 , jQuery 3.3.1, Popper.js 1.0.2 and Tooltip.js 1.2.0. An npm package file in included too – package.json.
- package.json – npm package file
- node_modules – directory of npm dependencies (Bootstrap 4.1.3 , jQuery 3.3.1, Popper.js 1.0.2 and Tooltip.js 1.2.0)
JavaScript
There is one js file that includes the necessary code for ed Navbar – ed-navbar.js. Bootstrap 4.1.3 JS (bootstrap.min.js), jQuery 3.3.1 (jquery.min.js) and Popper 1.0.2 (popper.min.js) are included too.
- js/ed-navbar.js
- js/bootstrap.min.js
- js/jquery.min.js
- js/popper.min.js
C) Help & Resources
ed Navbar is designed specifically for Bootstrap 4-based templates and extends Bootstrap 4 for a vertical navbar layout. For additional resources on Bootstrap theming please refer to Bootstrap 4 Theming Documentation. For help on SASS, refer to the SASS guide below.