Clickable (linking) toplevel navbar links with dropdowns #62

bassscape opened this Issue Aug 8, 2012 · 13 comments


None yet
7 participants

I would like to change the standard Bootstrap navbar menu behaviours. Instead of a toplevel link just triggering a dropdown menu when it has secondlevel menu item I would like it to also link to a page.

I have achieved this behaviour with WordPress using the Roots Theme but I can't get it using 320press WordPress Bootstrap.

Here's the css I used to make dropdowns appear on hover and retain clickable/working links on the parent menu item:

/* This rule makes toplevel menu items clickable links and also displays dropdown menus on hover - WHOA! */
ul.nav li.dropdown:hover ul.dropdown-menu { display: block; margin:0;}, .dropdown-toggle:after { content: none; }

Additionally the following code from this comment on GitHub also worked for the same behaviours:
retlehs/roots#269 (comment)

  function () {
    $('nav > ul > li:has(ul) > a').attr('href', function (i, val) { return val + '#'; });

Neither of these bits of code seem to work for me in 320press WordPress Bootstrap. Could anyone advise why they may not be working or how to get this code working?

Same Issue here :/
If you have found a working solution it would be kind to share it with me!

wuliupo commented Aug 10, 2012

Hi @jansolo76 @bassscape
CSS 2+:

nav > ul > li > ul {display:none}
nav > ul > li:hover ul {display:block}
nav > ul > li > ul > li > ul{display:none}
nav > ul > li > ul > li:hover ul {display:block}

Hi @wuliupo,
thanks for your help, but that didn't solve the problem.
I actually changed line 65 in library/js/bootstrap-dropdown.js from false to true.
I don't know why it now does like it should, but it does...

Hi @wuliupo
Thanks for your input. I believe your css enables the dropdown menu items to appear on hover - please correct me if I am wrong. The first piece of css I included has already achieved this.

I'm still looking for a way the make toplevels links with dropdown menus clickable and link to it's page when its dropdown menu is displayed on hover. I don't know if I'm getting my css selectors wrong for my menu markup.Currently the html for the menu is this:

<ul id="menu-primary-navigation" class="nav pull-left">
    <li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item dropdown menu-item-6 active active"data-dropdown="dropdown">
        <a href="http://testing-wp.loc/" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b> </a>
        <ul class="dropdown-menu">
            <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://testing-wp.loc/child-page/">Child Page</a></li>

While I don't have the toplevel links with dropdown menus clickable and linking to pages I have improved the UI by using this css to hide the default hand pointer cursor for used for links.

ul.nav li.dropdown:hover a.dropdown-toggle { text-decoration:none; cursor:default }

Hi @bassscape
I already posted the solution! ;)

Well, i actually meant that i got the "responsive" dropdown working.
The parent menu-links simply didn't react on clicks. Now they do....i have not tested what kind of side effects it has on the fixed (scrollable) default navbar whatsoever, since i have disabled it and changed it against a left sidebar....

You submitted your answer as i was writing my response out - sorry.
I don't want to edit the 320press WordPress Bootstrap theme files so I'm using a child theme.
I have modified the bootstrap-dropdown.js file and included it as part of my child theme. I have deregistered the bootstrap-dropdown.js from the 320press WordPress Bootstrap theme files and enqueued the modified version from the childt heme.

/*              MODIFY THE 320press WordPress BOOTSTRAP NAVBAR              */
if (!is_admin()) add_action( 'wp_print_scripts', 'pp_add_remove_js', 11 );
function pp_add_remove_js( ) {
    wp_enqueue_script( 'pp_bootstrap_dropdown', get_bloginfo('stylesheet_directory').'/pp_includes/bootstrap_js/bootstrap-dropdown.js', array( 'jquery' ), '', true);

Thanks for your advice to edit the file bootstrap-dropdown.js!

bassscape closed this Aug 10, 2012

@wuliupo your solution worked fantastically for me. Thank you! :)

robhadfield referenced this issue in wp-bootstrap/wp-bootstrap-navwalker Apr 28, 2013


How to make top menu clickable of drop down menu #9

@bassscape 👍 for sharing the solution. Cheers!

This solution no longer works can anyone else with any update?

@touchst works a charm... many thanks.

bsteinlo commented Sep 2, 2015

None of the solutions above worked for me. I followed that bootstrap link above, which gave me this
$('.dropdown-toggle').click(function() { var location = $(this).attr('href'); window.location.href = location; return false; });
and it works perfectly!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment