Top Level Menu Clickable when using Sub-Menus

Hi,

I’ve researched this topic among the forum topics, and while it appears that some folks had solved it with adjusting the navwalker.php code, I’ve been unable to replicate their success on my own site. One bit of code I tried was from here: https://colorlibsupport.com/t/headerlink-drop-down-clickable/
I also attempted the advice from here: https://colorlibsupport.com/t/adding-a-sub-item-to-a-top-level-item-removes-the-link-from-the-top-level-item/

I want both top-level and sub-level menu item links clickable. The one example I have on my page right now is top-level: Schedule [needs to link to /schedule], and sub-level: Core Conference Schedule [needs to link to /schedule/code-conference-schedule].

In case either of these additional menu code items could interfere: I also plan on enabling this bit of code (which I tried, and then disabled incase it was causing my issue.)

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

I will also want to use this code to remove the background block color and instead highlight/bold the active link https://colorlibsupport.com/t/how-to-change-hover-color-on-navigation-bar/

The site in question:
http://passive-house-conference-2017.phius.org/

Can you offer any assistance? Paldies!

Hey there,
Hope you’re doing well today

Kindly unzip the file attached and open the navwalker.php file, then replace the contents in the navwalker.php file on your theme (Appearance > Editor) with the contents in the file attached. After this, Kindly add and save the following code to Appearance > Customize > Additional CSS:

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

I hope this helps :slight_smile:

Best Regards,
Support

Wonderful, thank you so much. That did exactly what I was looking for.

Can I bother you for one more quick question?
I enabled some code to remove the background color and instead signify the active link as bold. It’s working almost exactly right. I don’t know how to change font color of the the un-hovered/un-clicked sub-menu item “Core Conference Schedule.” It’s grey while all the rest of the menu items are green (#005747).

The code I’m using is:

#page .btn-default, .label-default {
  background-color: #005747;
    border-color: #005747;
}
#page .navbar-default .navbar-nav > .active > a, 
#page .navbar-default .navbar-nav > .active > a:hover, 
#page .navbar-default .navbar-nav > .active > a:focus, 
#page .navbar-default .navbar-nav > li > a:hover, 
#page .navbar-default .navbar-nav > li > a:focus, 
#page .navbar-default .navbar-nav > .open > a, 
#page .navbar-default .navbar-nav > .open > a:hover, 
#page .navbar-default .navbar-nav > .open > a:focus, 
#page .dropdown-menu > li > a:hover, 
#page .dropdown-menu > li > a:focus, 
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, 
#page .dropdown-menu > .active > a, 
#page .navbar-default .navbar-nav .open .dropdown-menu > .active > a {
  background-color: transparent;
    border-color: transparent;
    color: #005747;
    font-weight: bold;
}

and this

#page .dropdown-menu > li > a,
 {
  background-color: transparent;
    border-color: transparent;
    font-color: #005747;
}

Thank you

Hi there,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

#page .dropdown-menu > li > a {
color: #005747!important;
}

I hope this helps :slight_smile:

Best Regards,
Support