Menu not adding sub category for one item but works for other Wordpress

Question

I have a naked wordpress theme. The menu nav bar has 6 items/linked text of these 6, 4 have sub categories with dropdowns showing.

However when I go to add a sub category to one of the items that does not already have a dropdown/sub category it does not display on my site.

I have saved and cleared cache.

When I inspect the html code I have noticed a difference between the successful and unsuccessful. See below:

Successful menu item with sub category in dropdown:


    Who We Are
    
        
            Leadership Team
        
        
            Ireland
        
        
            UK

Unsuccessful menu item with sub category not on display:


    News Hub
    
        
            Get Social

When I edit the html in the inspector and change the unsuccessful item to this it works:


    News Hub
    
        
            Get Social
        
    





    News Hub
    
        
            Get Social

My question is how/where do I make this edit permanent? TIA

Edit CSS added:

ul#menu-main li:hover:after {
width:100%;
}
ul#menu-main li.who:after {
left:-50px
}
ul#menu-main li.se:after {
left:-37px;
}
ul#menu-main li.se:hover:after {
width: 186%;   
}
ul#menu-main li.who:hover:after {
width: 160%;
}
#menu-main .pj.has-links .sub-menu {
left:60px;
}
ul#menu-main li a {
color:#fff;
display: inline-block;
}
.single ul#menu-main li a {
font-weight:500;
font-family: 'AvenirLTStd-Medium', sans-serif;
}
ul#menu-main li a:hover {
color:#ffee00;
}
ul#menu-main li.has-links {
position: relative;
}
ul#menu-main li.has-links a:after {
content: '';
background: url(img/chevron-down.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;
}
ul#menu-main li.has-links:hover a:after {
content: '';
background: url(img/chevron-active.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;    
}
ul#menu-main li.has-links:hover .sub-menu {
-webkit-transform: scale(1) translateX(-50%);
transform: scale(1) translateX(-50%);
visibility: visible;  
}

user_6837428 · Answer

Your issue is that when you add a new child menu-item under an existing parent menu-item that doesn't have already any child menu-item under it, the has-links class is not added to this particular parent menu-item.

This is bizzare because their must be a php function that is generating this class and adding it to each menu-item that is becoming a parent menu-item after putting under it a child menu-item !
If their is no such php function, how did the other parent menu-item get this class ?!

Also, you have a php function, maybe the same one, that is generating a class before the has-links class. It's who for the WHO WE ARE menu-item, it's se for the SERVICES menu-item, it's pj for the PROJECTS menu-item, BUT it's not generating a class for NEWS HUB menu-item when it becomes a parent !
If their is no such php function, how did the other parent menu-item get those classes depending on their names/labels ?!

You say :

I have a naked wordpress theme

Is this a theme that you are developing or a theme that you are using ?
Assuming that it's a theme that you are using, could you tell us which one is it.

Finally, for your menu to work, since I don't have your php code, I'm going to use the native CSS classes added by WordPress for any parent menu-item.
In the above CSS that you provided, replace every has-links by menu-item-has-children. It should work !
Remember to use a child theme for your changes or they will be removed on the next update of the theme that you are using.

Menu not adding sub category for one item but works for other Wordpress

1 Answers