• Home
    • Cool Knowledge base
    • Light Knowledge base
    • Help Desk
    • OnePage Documentation
  • Services
    • Main Services
    • PPC Services
    • SEO Services
    • SMM Services
  • Docs
  • Blog
    • Affiliate
    • Ecommerce
    • Frontend
    • linux
      • nginx
    • PHP
      • Magento
      • wordpress
    • Python
    • SEO
    • Web
  • Forum
    • Forums
    • Forum Topics
    • Topic Details
    • Ask Question
  • Pages
  • Contact

Subscribe to Updates

Get the latest creative news from FooBar about art, design and business.

What's Hot

VideoJS – multiple source demo

2022-03-08

Add custom field to Woocommerce tab

2022-03-07

Surror Product Tabs for WooCommerce

2022-03-07
Facebook Twitter Instagram
  • 中文
  • English
Facebook Twitter Instagram Pinterest VKontakte
SEO & Website build tips SEO & Website build tips
  • Home
    • Cool Knowledge base
    • Light Knowledge base
    • Help Desk
    • OnePage Documentation
  • Services
    • Main Services
    • PPC Services
    • SEO Services
    • SMM Services
  • Docs
  • Blog
    • Affiliate
    • Ecommerce
    • Frontend
    • linux
      • nginx
    • PHP
      • Magento
      • wordpress
    • Python
    • SEO
    • Web
  • Forum
    • Forums
    • Forum Topics
    • Topic Details
    • Ask Question
  • Pages
  • Contact
SEO & Website build tips SEO & Website build tips
Home»Frontend»Bsnav adds features to the Bootstrap 4 navbar element.
Frontend

Bsnav adds features to the Bootstrap 4 navbar element.

OxfordBy Oxford2021-04-17No Comments2 Mins Read
Facebook Twitter Pinterest LinkedIn Tumblr Email
Share
Facebook Twitter LinkedIn Pinterest Email

https://github.com/fitodac/bsnav

bsnav

Bsnav adds features to the Bootstrap 4 navbar element.

See the demo

 

How to use it

To start using it, include the css and js files.

Just add a link to the css file in your <head>:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fitodac/bsnav@master/dist/bsnav.min.css">

Then, before your closing <body> tag add:

<script src="https://cdn.jsdelivr.net/gh/fitodac/bsnav@master/dist/bsnav.min.js"></script>

Where you want to show the menu, you must include the following code:

<div class="navbar navbar-expand-lg bsnav bsnav-light">

  <a class="navbar-brand" href="#">bsnav</a>

  <button class="navbar-toggler toggler-spring"><span class="navbar-toggler-icon"></span></button>

  <div class="collapse navbar-collapse justify-content-md-end">
    <ul class="navbar-nav navbar-mobile mr-0">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</div>

In the demo you can find other styles for navabars.

Mobile navbar

Bsnav includes a mobile sidebar menu. To work, you must include the following html code before closing the <body> tag, then, the bsnav javascript will be responsible for cloning the menu to use it for mobile versions.

<div class="bsnav-mobile">
  <div class="bsnav-mobile-overlay"></div>
  <div class="navbar"></div>
</div>

 

Contributing

PLEASE review CONTRIBUTING.md prior to requesting a feature, filing a pull request or filing an issue.

 

Traducciones

Honestly, I do not speak English very well. If you are interested in helping me improve this documentation you are welcome. And if you want to translate the documentation into other languages even better. ** Bsnav ** is open source and we do it together. 😉

Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Avatar photo
Oxford

Related Posts

VideoJS – multiple source demo

2022-03-08

closeable list item w3.css

2021-06-05

The Best Looking CSS Animated Background Examples

2021-05-25

30 Best Bootstrap Navbar Template in 2020

2021-04-17
Recent Posts
  • VideoJS – multiple source demo
  • Add custom field to Woocommerce tab
  • Surror Product Tabs for WooCommerce
  • How To Scrape Amazon at Scale With Python Scrapy, And Never Get Banned
  • Compile a Jekyll project without installing Jekyll or Ruby by using Docker
April 2021
M T W T F S S
 1234
567891011
12131415161718
19202122232425
2627282930  
« Mar   May »
Tags
app branding culture design digital Docly docs etc faq fashion featured fitness fix github Helpdesk Image issue leisure lifestyle magento Manual marketing memecached Photography picks planing seo sequrity tips Travel trending ui/ux web WordPress 爬虫
Editors Picks

Fujifilm’s 102-Megapixel Camera is the Size of a Typical DSLR

2021-01-05
Top Reviews
8.9

Which LED Lights for Nail Salon Safe? Comparison of Major Brands

By Oxford
8.9

Review: Xiaomi’s New Loudspeakers for Hi-fi and Home Cinema Systems

By Oxford
70

CES 2021 Highlights: 79 Top Photos, Products, and Much More

By Oxford
Advertisement
Demo
  • Facebook
  • Twitter
  • Instagram
  • Pinterest
About Us
About Us

Your source for the lifestyle news. This demo is crafted specifically to exhibit the use of the theme as a lifestyle site. Visit our main page for more demos.

We're accepting new partnerships right now.

Email Us: [email protected]
Contact: +1-320-0123-451

Facebook Twitter Instagram Pinterest YouTube LinkedIn
Recent Posts
  • VideoJS – multiple source demo
  • Add custom field to Woocommerce tab
  • Surror Product Tabs for WooCommerce
  • How To Scrape Amazon at Scale With Python Scrapy, And Never Get Banned
  • Compile a Jekyll project without installing Jekyll or Ruby by using Docker
From Flickr
Ascend
terns
casual
riders on the storm
chairman
mood
monument
liquid cancer
blue
basement
ditch
stars
© 2025 Designed by 九号资源网.

Type above and press Enter to search. Press Esc to cancel.