Hi,
I have a couple of questions regarding the default mobile menu behavior:
Disabling the .td-menu-socials-wrap area:
Is there a way to disable or hide this section in the default mobile menu via the admin settings? If not, what would be the recommended method (CSS or PHP) to remove it cleanly without affecting other parts of the menu?
Expanded subcategories in the mobile menu:
I came across a thread from 2020 stating that subcategories in the default mobile menu could not be shown expanded by default, as they were controlled via JavaScript. However, I recently saw a demo that seemed to use the standard mobile menu and had the subcategories already expanded when the menu opened.
Has this feature been updated or made possible recently? If yes, how can I achieve the same behavior?
Thanks in advance for your help!
Hi,
If you do not want any socials to be display in the mobile menu, then you can remove theme from the theme panel > social networks or use a custom css like this one:
.td-menu-socials-wrap .td-menu-socials {
visibility: hidden;
}
The subcategories on menu should be working now, in the thread mentioned by you most probably it was a but or soothing like that – https://i.imgur.com/181eOem.png
Thank you!
Hi Calin,
Thanks for your reply!
Regarding the social icons in the mobile menu, you mentioned removing them via theme panel > social networks. Could you please clarify which exact setting disables them from showing in the mobile menu only? I would like to keep them on desktop (footer) but remove them from mobile menu.
As for the expanded subcategories, you mentioned it “should be working now” — does that mean there is now an option in the admin panel or menu settings to have subcategories expanded by default on mobile? Or is there a specific class, script modification, or menu setup required to enable that behavior?
Would appreciate a bit more detail on both points so I can implement the changes correctly.
Thanks again!
David
Hi,
From the theme panel > social networks you need to remove the social networks and this will remove theme from standard headers and mobile menu. But in case that you are using a standard header template and not a cloud then this method will remove the socials from both (desktop and mobile) versions. So, if you are using a standard header and footer then you’ll need to use the above css.
The expanded subcategories on mobile menu can be achieve on cloud header were you can use a popup element as mobile menu and you can create the mobile menu in a page using tagDiv Composer and you can use the element list menu, that one can be configurate to display by default the menu expanded. This can be done only if you are using a cloud header.
If you are using the standard header then you can try this custom css:
.td-mobile-main-menu .sub-menu {
max-height: max-content;
opacity: 1;
}
.td-mobile-content .td_mobile_submenu > a .td-icon-menu-right {
display: none;
}
Thank you!
Hi Calin,
Thanks for the clarification!
I’m using a Cloud Header but with the standard mobile menu, and your suggested CSS for the expanded subcategories works perfectly in this setup.
Also, your explanation regarding the social icons makes sense. Since I want to keep them on desktop but remove them on mobile, the CSS approach is exactly what I needed.
Appreciate the quick and helpful support!
