Clickable (linking) toplevel navbar links with dropdowns

[bassscape]

Clickable (linking) toplevel navbar links with dropdowns

[bsteinlo]

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!

[jansolo76]

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

[wuliupo]

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}

[jansolo76]

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

[bassscape]

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>
        </ul>
    </li>
</ul>

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 }

[jansolo76]

Hi @bassscape
I already posted the solution! ;)

[jansolo76]

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

[bassscape]

@jansolo76
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              */
/* TOPLEVEL LINKS WILL STILL LINK TO PAGES WHEN DROPDOWNS DISPLAY ON HOVER  */
/*--------------------------------------------------------------------------*/
if (!is_admin()) add_action( 'wp_print_scripts', 'pp_add_remove_js', 11 );
function pp_add_remove_js( ) {
    wp_deregister_script('bootstrap-dropdown');
    /* MODIFIED BOOTSTRAP DROPDOWNS 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!

[rachelnicole]

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

[pushpinderbagga]

@bassscape 👍 for sharing the solution. Cheers!

[Taylorsuk]

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

https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know#how-to-enable-bootstrap-3-hover-dropdowns

[Taylorsuk]

@touchst works a charm... many thanks.

[kushalpal]

how to Clickable (linking) toplevel navbar links with dropdowns in WordPress

[RNwebdk]

I needed a different solution, in my case I only wanted the parent link to work in case the dropdown was visible, hope this can help someone
`

	 //Only go to the link when dropdown is already open (if the dropdown is a link)
	
	$('.navbar ul.navbar-nav > .dropdown > a[href]').click(function() {
	    var dropdown = $(this).next('.dropdown-menu');
	    
	     // * The dropdown can be non-existent
	     // * The dropdown can be already open by css
	     // * (for instance display: block from a custom :hover setting) 
	     // * or a "show" class on the element which also sets a display: block;
	     
	    if (dropdown.length == 0 || $(dropdown).css('display') !== 'none') {
	        if (this.href) {
	            location.href = this.href;
	        }
	    }
	});`