By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Question about styling sub menu dropdown background

J

Jambomus

New Member
I'm trying to add some further styling to my mobile menu to help define sub-menus better. The photo shows my menu structure (left),the current mobile menu (centre) and the desired effect (right). I simply want to change the typography so it's smaller and add a different background colour to the sub-menu. Even better if I can add a different colour for the 2nd tier down (Overview - Gallery)
 
elementor official

Attachments

  • 185551568_10222549118449634_3341334024931701605_n.jpg
    185551568_10222549118449634_3341334024931701605_n.jpg
    42.1 KB · Views: 15
Magical1

Magical1

New Member
I think you will need to look at the HTML structure for your menu using the "inspect element" in your browsers developer tools to identify which elements are being styled and then using the css options for the nav element you will be able to target the different levels ...

Have you tried using left aligned for the menu and sub menu items?

... this should push the elements to the left for each child level of navigation, which is quite an effective visual hint to what is happening....
 
elementor official
J

Jambomus

New Member
Yes you're right, I managed it with the following code although I couldn't style the tier 2 (overview-gallery) any differently:

.drop-down .elementor-sub-item{
color: #f0d8b6 !important;
background-color: blue !important;
}

*UPDATE* I just took the !important out of the background colour and that now only colours tier 2, not the 1st (Bridge Cottage). Don't think my code is very clean =)
 
elementor official

Attachments

  • Group 3.jpg
    Group 3.jpg
    29.6 KB · Views: 10
E

elementor-tww

New Member
The best way is to make a second, separate row for mobile menu. And with the "advanced" --> "responsive" tabs you can switch between pc, tablet and mobile view. And then test the code from Jambomus
 
elementor official

Latest posts

Latest Products

Other Elementor Resources

elementor official
elementor official
Top