Hi @cookingkatielady! I took a look at your site and also experienced the issue with “By Course” not expanding properly. After poking around for a bit, I noticed that the sections (Breakfast, Main Course, etc) are all being loaded into the page, they just aren’t being shown when you hover over that menu item. That’s an important distinction because if the elements didn’t exist on the page at all that might mean it’s a different issue.
I took a look at the styling for the theme you’re using, and I noticed it has the following lines:
#nav-wrapper .vtmenu .menu-item-has-children:hover > .sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
That is styling which effectively says “if this menu item has children (subpages), make it visible when the user hovers over it”. When I load your webpage, I see the following (some links removed to save space):
<ul role="menu" class="sub-menu">
<li id="menu-item-6554" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6554 dropdown"><a href="#">By Course <span class="caret"></span></a>
<ul role="menu" class="sub-menu">
<li id="menu-item-6558" ><a href="https://cookingkatielady.com/category/breakfast/">Breakfast</a></li>
<li id="menu-item-6571" ><a href="https://cookingkatielady.com/category/snacks-and-appetizers/">Snacks & Appetizers</a></li>
...
</ul>
</li>
<li id="menu-item-6555" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6555 dropdown"><a href="#">By Method <span class="caret"></span></a>
<ul role="menu" class="sub-menu">
<li id="menu-item-6557" ><a href="https://cookingkatielady.com/category/air-fryer/">Air Fryer</a></li>
<li id="menu-item-6559" ><a href="https://cookingkatielady.com/category/crock-pot/">Crock Pot</a></li>
...
</ul>
</li>
<li id="menu-item-6556" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6556 dropdown"><a href="#">By Diet <span class="caret"></span></a>
<ul role="menu" class="sub-menu">
<li id="menu-item-6563" ><a href="https://cookingkatielady.com/category/high-protein/">High Protein</a></li>
<li id="menu-item-6566" ><a href="https://cookingkatielady.com/category/low-carb/">Low Carb</a></li>
...
</ul>
</li>
</ul>
Note that both the “By Method” and “By Diet” sections have the menu-item-has-children class, but “By Course” does not! I actually tried adding that class to the “By Course” section on the page for myself locally and it worked exactly as expected.
All that to say, I think it might be because there is something misconfigured with the “By Course” menu item. Do you mind checking in the nav menu settings to ensure it looks exactly like the other two (currently working) sections? This can be found under Appearance > Menus > (your navbar menu name).
Hope this helps!
Hello!
Thanks for getting back to me. When I go to Appearance > Menus it appears to be set up exactly the same as “By Method” and “By Diet”. They are all set up as custom links with the categories attached underneath. I even tried making a new menu with the same setup and had the same issue. So do I need to add some sort of coding to show it in my theme file editor?
Would I edit something in here in my theme editor?
}
.topbar #nav-wrapper .topbar-menu li a:hover,
.topbar #nav-wrapper .topbar-menu .dropdown-toggle:hover .caret::after,
#nav-wrapper .vtmenu li.menu-item-has-children:hover:before {
color: #ceac92;
}
I think it is a wordpress issue because even when I change my theme I have the same problem.
Hey again, sorry for the delayed response. It seems like all the dropdown menus are functioning correctly now! Were you able to find a resolution, or do you know what may have fixed the underlying issue?
