Adding a sub item to a top level item removes the link from the top level item.

Sparkling
1

When you add a sub-item to an existing menu item, it removes the link from that existing menu item, and clicking on it will no longer take you where it’s supposed to.

This is the result:

  • Marketing (clicking does nothing)
  1. Category 1 (clicking takes you to category 1)
  2. Category 2 (ditto)
  3. Category 3 (ditto)

I’d like the top level of my drop down menus to retain their links. Any advice?

2

I guess the problem is that adding sub items changes the top level item from a link into a button that toggles the visibility of the dropdown menu.

I’ve never used a website with drop down menus that didn’t allow you to click on the top level menu item. If I can’t fix this, I’m going to have to switch to another theme, because my users are going to be very confused when clicking on the menu items doesn’t do anything. (Yeah, technically it does toggle open the menu, but since hovering over the menu reveals the menu anyway, this is totally redundant.

3

Yes, it is expected behavior. This theme uses this Bootstrap Navwalker and I have no plans switching to another solution.

You might want to look into Travelify theme which uses custom built navwalker.

4

Thanks for your reply.
How difficult would it be to patch the behavior I want into the navwalker?

Or would it be easier to just write some javascript that changes each href attribute from “#” to a URL after the menu is generated?

5

I haven’t looked into it as I want to keep things as simple as possible for a free theme.

If you don’t have many top menu items then JavaScript might be a quick solution. Not the best one if you are looking to change those pages regularly but if those are going to be static page then why not.

6

They will be pretty darn static. I’ll give it a try. Thank you.

7
How difficult would it be to patch the behavior I want into the navwalker?

Easy as pie. Go to Appearance > Editor, then find the navwalker.php file in the list on the right. Here’s the relevant code from that file:

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
    $atts['href']               = '#';
    $atts['data-toggle']        = 'dropdown';
    $atts['class']              = 'dropdown-toggle';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

You can comment out everything but this line:

$atts['href'] = ! empty( $item->url ) ? $item->url : '';

8

Awesome!

Thank you for posting this solution here on forum! Hope others will find it useful as well.

Might consider to add this to theme itself. Will see.

Thank you!

9

Excellent! This solution has worked for me on both Dazzling and Sparkling.

Thank you @dp557!

10

dp557 thanks for the solution. If you would like to make dropdown expand on hover add

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

Also to make things more intuitive/usable parent top level link in dropdown should have same active colour as other top level menu items that are not dropdowns when dropdown item page is displayed. I used

.navbar-default .navbar-nav > .current_page_ancestor {
background-color: #429fd1;
}
.navbar-default .navbar-nav > .current_page_ancestor a{
color:white;
}

Hope it can help, example used with Dazzling theme and not tetsted with Sparkling

11

@sportpal

Sparkling theme has much better custom color management implemented and soon it will be updated for Dazzling as well. Haven’t had time to update it yet. Sorry about that.

12

Thank you @dp557! Much appreciated.

I wonder if someone can help me…I am VERY new to wordpress and am not entirely sure what is meant by

You can comment out everything but this line:

$atts[‘href’] = ! empty( $item->url ) ? $item->url : ‘’;

I tried adding /* and */ to the beginning and the end of the relevant code but that broke the site. :confused:

Please can someone spell it out to me in layman’s terms what I need to do to get the menu working.

Thanks so much!!!

Kindest regards,
Bonnie

13

In PHP you should use comments like this //

Add the right before a single line of code, since there are several, add it before each and every line.

/* */ is used for multi line comments but are used for text comments as php my contain / and can break the entire thing.

14

Just FYI, for some reason I could not get this working using child theme in Dazzling. But it works fine otherwise.

15

Can someone tell me how to have this code working?

already commented on the the code and still not working.

Can you experts post what the after code looks like? 3rd level submenu not working still for me.

I am using Dazzling theme.

Thanks.

16

For those having problems with code example above you can try this one instead. It is similar solution to the same problem:

if ( $args->has_children && $depth === 0 ) {
        $atts['href'] = ! empty( $item->url ) ? $item->url : '';
        $atts['data-toggle']        = 'dropdown';
        $atts['class']                        = 'dropdown-toggle';
} else {
        $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
17

Hi, I am fighting with this problem now and I have no idea why it is not working.
This is my code, i even hard coded the link there just to see it working but it will not. I am using dazzling-child theme.
This is my code:


if ( $args->has_children && $depth === 0 ) {
                                $atts['href']                   = ! empty( $item->url ) ? $item->url : 'http://localhost/wordpress/shop';
                                $atts['data-toggle']        = 'dropdown';
                                $atts['class']                        = 'dropdown-toggle';
                        } else {
                                $atts['href'] = ! empty( $item->url ) ? $item->url : 'http://localhost/wordpress/shop';
                        }

thanks for any suggestions.

18

Hi @rameesareno,

This is old topic and to help keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/dazzling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Thanks,
Movin