Bootstrap Navbar Menu with Icons: 2 Free Templates

Today’s free web design resource is a pack containing two Bootstrap Navbar Menus with Icons. These templates are very simple and come with a logo section on the left and a links section with icons on the right.

They 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. These types of menus are used often by web designers in admin panels and dashboards.

Below you’ll find the live preview and download links. Enjoy!

The 2 Navbar Menus with Icons

Template 1

Fixed top dark navbar with animation and colored icons.

Template 2

Fixed top colored navbar with animation and white icons.

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”.

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).

You might also like:

Bootstrap Navbar Menu: 4 Templates
Bootstrap Search Box: 3 Templates
Bootstrap 4 Navbar Tutorial: How To Quickly Create a Beautiful Top Menu

Demo, Download and License

VIEW DEMO

DOWNLOAD: Bootstrap Navbar Menus with Icons (3332 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.