Bootstrap Navbar Menu: 4 Free Templates

Updated on: Nov 18 2018 by Anli

Bootstrap Navbar Menu: 4 Free Templates

Today’s free web design resource is a pack of four Bootstrap navbar menu templates. They are very simple and come with a logo section on the left and a links / buttons section on the right.

The templates come with different designs and animations, and are based on the default Bootstrap’s navbar component.

You can use them as a starting point to create the header section and the top menu of your next website project. Continue reading below to find the live preview and download links. Enjoy!


The 4 Navbar Menu Templates

Template 1

Static dark navbar.

Bootstrap navbar 1

Template 2

Static transparent navbar.

Bootstrap navbar 2

Template 3

Fixed top dark navbar with animation.

Bootstrap navbar 3

Template 4

Fixed top light navbar with animation.

Bootstrap navbar 4

How To Use The Templates

Download the zip package below and extract it. Each template / layout is in its own folder called “layout 1”, “layout 2” and so on.

Use the “index.html” file to modify the HTML code. The style can be changed from the “style.css” file in the “css” folder (assets/css).

In the templates I have also used some Javascript (jQuery) for the navbar’s behaviour and for the fullscreen background. You can find this code in the “scripts.js” file (assets/js). For the animated navbars I’ve used Waypoints to trigger the animation when the page scrolls up or down. I’ve called it in “scripts.js”.

The images are located in the “img” folder (assets/img). The favicon and the Apple touch icons are in the “ico” folder (assets/ico).

I’ve created a simple logo with Photoshop here and it looks good, but I think with a little more work or by hiring a logo designer, it could look even better.

If you choose the hiring route, I recommend Fiverr, you can find some good designers there.

You might also like:

these Search Box templates,
and this tutorial: How To Quickly Create a Beautiful Top Menu in Bootstrap 4.

Demo, Download and License

VIEW DEMO

DOWNLOAD: Bootstrap Navbar Menu Templates (15400 downloads)

LICENSE:

You can use these templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

Want More?

Check out Rois! It uses the same navbar menus and comes with 20+ templates:

Rois Bootstrap Templates

Rois Bootstrap Templates

3 Comments So Far

  1. Techwitty says:

    “You can use these templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.”

    This always confuses me. What constitutes ‘enough word’ – a tweet?

  2. Prex says:

    How can you change the background color from layout No 3. when scrolled down?

Leave a Reply

To learn how we use your data when you comment, read our Privacy Policy here.