Nav Menu on responsive

Whoa, to clarify (sorry) I am talking about the responsive mobile menu…

For many reasons this is so by design..
But .. I think that if your parent menu item isn’t a link itself you could use:

@media (max-width: 979px){ .nav.nav li>ul{display: none;}}

if is a link then with one click you’ll expand the submenu but with the second you will be taken to the linked page/post…

Uhmm..well I don’t want the parent to be a link but I couldn’t find any way in the menu to make one so. I tried creating a link type and leaving it blank but then it automatically points to the home page of site.

the submenu isn’t ever collapsed to begin with unless not mobile. What is the purpose of submenu if it is always listed and never collapsed? What is the standard design practice for this…just leaving it tabbed over and listed? Seems like that takes up a lot of unecessary real estate.

I see on the parent item:

<a href="#" data-target="#" data-toggle="dropdown" class="dropdown-toggle">Shop <b class="caret"></b></a>

which leads me to think this should actually dropdown-toggle it’s children but it in fact does not. The children are always open listed.

In mobiles you don’t have the hover effect, so you have to click on the item. That’s why, in mobiles, they’re transformed in dropdown on click. Did you try the css above?
Since I don’t really understand the other the other reply, can you share a link to your website?

Also, just to know in Appearance -> Customize -> Header -> Navigation, what do you have? Expand on click or on hover?

here is the parent and the child:

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children dropdown menu-item-134">
<a class="dropdown-toggle" href="#" data-target="#" data-toggle="dropdown">
Shop
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-67">
<a href="https://localhost/gr8alt/product-category/batteries/">Batteries</a>
</li>
</ul>
</li>

Expand on click in Navigation Header Setting

I’m not trying to hover anything. I want the child hidden until I DO click on the parent. But that is not what is happening it lists it already unfolded and even clicking on the parent does NOT collapse the child. The child is always listed and unfolded from the parent.

I wish i could give you a link but it is on localhost only.

And I suppose this is for the desktop version right?
As I said in the reply above, if you have this in the desktop version is because of that setting in Appearance -> Customize -> Header -> Navigation
which is set to Expand submenus on click.
If you want to expand submenus on hover select Expand submenus on hover.
Then by default in mobiles (width <980px) submenus are still expanded, for the reasons I told you above (no hover effect in mobiles). But if you put the css I gave you, should still have them collapsed. But I don’t know if you tried it..

To test the submenus on hover you can test the demo site.

Sorry cross replying.
So what’s the problem, the children are expanded in the desktop version?

No, the desktop one is fine.
well I would like to have the children accordion on the mobile version I guess is the best and only way I can explain. I think I’m giving up man, thanks for the help.

Ok,
but just one thing, have you tried this:
@media (max-width: 979px){ .nav.nav li>ul{display: none;}} ?
And doesn’t work?

Oh MAN!!!!! While I was looking at the settings I unchecked the “Hover move effect for the sub menu items” and now with your @media it works!

Dear Neil can I kill you? ??
Eheh,
that code is from my first reply ??
Have a great day ??