Top level header item is not linking to a page

Sparkling
1

I set my menu up to have a top level menu item (Courses) with a few sub-menu items to be displayed under it.
On the menu structure, I added the following menu items using the standard WordPress “Pages”:

  • Courses - Navigation Label: Courses | Title Attribute: glyphicon-book
    • Course 1 - Navigation Label: Course 1 | Title Attribute: [blank]
    • Course 2 - Navigation Label: Course 2 | Title Attribute: [blank]

On the actual site, Course 1 and Course 2 link through to the correct pages. However, the top-level menu link for Courses appears to have a “#” URL, which doesn’t link it anywhere. I read through the support documentation on the Menu Setup, and the only place it mentions having an “unclickable” link in the menu is in the Divider and Dropdown Headers. My menu links aren’t set up the way it is described in the documentation, so I’m not sure why I’m getting an unclickable link in the menu.

The only way I can seem to get a link to the Courses page is by adding another link to it as a child page in the menu. This seems like an unnecessary duplication, so I was hoping there was another way.

2

This is how default Bootstrap menu works because of its mobile-first approach. I am not a huge fan of this either, but I like to keep things as simple and possible and left default directory in place.

To change this behavior you should edit navwalker.php file which is located in theme folder - inc. 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 : '';

3

You’re welcome. =)

4

@dp557

Thank you for that! :slight_smile:

5

Thank you … was looking for the same.

6

Aigars, sorry to be dense but I may need further instructions. I tried commenting out the other lines in navwalker.php but now the sub-menu items no longer show up. The top menu item is now clickable, which was the original goal, but I’d still like the sub-menu items to also appear and be clickable.

Can you let me know where I messed up? This is what I have in navwalker.php now:

// 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 : '';
                         //  }

And this is my website: http://filmanywhereproductions.com

Thanks,
Sarah

7

This code example is better suited for Sparkling theme where drop down opens on hover. For Unite theme dropdown can be opened only on click, so you are trying to do things with a single click - open dropdown and click on the top menu item. Of course it doesn’t work properly.

To fix that you can add this code to jetpack CUstom CSS or child theme style.css. Due to specifics of this code it won’t work via Custom CSS field available via Theme Options.

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

This works in the root theme, but the child theme doesn’t seem to overide inc/navwalker.php
Anybody else have that issue?

Just seems it should overwrite default (parent) when place in the child-theme/inc/navwalker.php

9

For me it doesn’t work when adding to Jetpack’s Custom CSS. I have added:

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

to the custom CSS. The menu opens on hover, but when clicking on the top-level menu item it doesn’t open that page.

10

Found this wonderful little fix:
–Worked only in the parent theme, not the child–

In your minified bootstrap.min.js file, find the substring

“ontouchstart”
and replace it with

“disable-ontouchstart”

11

in case you are facing problems with code above you can try this one instead:

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 : '';
}
12

Hi

I urgently need help, I have followed all tips above, the only thing that I cannot do right now is change the code in navwalker.php as i do not have access rights to that right now and it can only be activated for me tomorrow.

my link - bioeis.eu

When I click on the main menu that has a drop down menu option it doesnt go to the page, it only opens the dropdown menu.

I also cannot change the menu structure as it will change my sitemap and this will affect SEO. I am working on a Live site so I would appreciate any help as soon as possible.

13

I’m using the Shapely Theme. and need help doing the opposite of this.
I have a parent page : Services, with 5 subpages in the dropdown. I would like to make the parent ‘Services’ in the menu inactive and just have the child pages linking to their respective pages.
Is that posible?

14

@pravdew This is old topic and created for Sparkling theme so to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ 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.