How to Drupal- Bootstrap Navigation Bar

This tutorial will show you on how to make a Bootstrap Navigation menu on Drupal framework.The navbar is a wrapper that positions branding, navigation, and other elements into a concise header. It’s easily extensible using bootstrap Collapse plugin, it can easily integrate responsive behaviors.

This tutorial includes 2 main steps:

1. Customize Bootstrap Navbar.
2. Fix Z-index of Administration menu.

 

1. Customize Bootstrap Navbar.

Go to Appearance and select bootstrap_subtheme settings from drupal administration menu. bootstrap_subtheme is created on previous drupal tutorials. Chech our guide how to Drupal- subtheme.

Bootstrap Navbar

 

On bootstrap_subtheme settings, Navigate Components tab >> NAVBAR. Select Navbar position and style.

Bootstrap Navbar

 

There is four type of Navbar positions on settings, Normal, Static Top, Fixed Top, and Fixed bottom. You can check demo from http://getbootstrap.com/getting-started/#examples-navbars.

Here we are using Fixed Top Navbar and inverse navbar style which gives you nice black (inverted) Navbar. Click save the configuration to apply the changes.

Bootstrap Navbar

 

Now the Navbar is ready on your site, but the navbar is above administration menu because of z-index of Navbar is higher than Admin menu. Let’s fix this on next step.

Bootstrap Navbar

 

2. Fix Z-index of Administration menu.

To fix this z-index problem, we’ve to assign a higher z-index value to the admin menu. To do this, right-click on admin menu and select inspect. You’ll see CSS code including Z-index of the admin menu. This case z-index is 501.

Bootstrap Navbar

 

Check the z-index of Navbar by the same way, which is higher than admin menu. Here z-index is 1030.

Bootstrap Navbar

 

Edit style.css from drupal\theme\bootstrap_subtheme\css.

Bootstrap Navbar

 

Add CSS tag that assigns a higher z-index value to admin menu and saves the file.

Bootstrap Navbar

 

Clear all cache from Configuration >> Performance. Preview your site. Now all set with the bootstrap Navbar.

Bootstrap Navbar

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...