[sociallocker ]

Making Bootstrap 3 Main Menu Hover Dropdown and Clickable DDRMenu DNN7

May 19, 2014 1:58 pm
More videos
PluginForage.com Member

Make a Bootstrap Main Menu Click
When it is Only a Parent Link/Page in DNN

This article covers how-to make some changes to the DDRMenu template XSLT & Bootstrap 3 on a DNN7 install. The original article examining the menu template can be found at: http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/4/Beginning-XSLT-with-DDRMenu-Part-1.aspx

Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.

The DDRmenu can be obtained at codeplex.

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

Bootstrap 3 was designed as a mobile first platform to build websites on. One issue that comes up often is when using the built-in bootstrap navigation menu, the way it is designed is if there are any child pages, the parent link is not clickable. Furthermore, when you hover over the menu item with a child, bootstrap requires you to click to see the drop down portion of the menu.

This way of doing things with the menu, though it makes sense from a mobile first point of view isn’t always optimal for individual websites.

To make a bootstrap 3 nav menu open up on hover is pretty easy and straight forward. With just a little CSS trickery, we can make that happen. All you need to add to your CSS is this code and you will get the hover effect you desire.

ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; margin: 0 }

There are times when you may want the parent link in a menu to actually display a page when clicked. By default with Bootstrap 3, when there are children pages to the main anchor link in a bootstrap navbar menu, you cannot get to a page by clicking the main anchor link. All that will appear is the drop down menu. In order to get the main anchor link to go to a page, you will need to edit the Bootstrap Menu ULXSLT.xslt file. So find the .xslt file and make their edits.

Where you find:






Replace it with:




Your parent link will now be clickable with a slight delay, so people on their phones don’t start clicking around to soon. We want the drop down menu to occur!

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

Recommended Bootstrap Course

Bootstrap Basics: Program Responsive Websites


Share your thoughts!