Problem: Mobile menu with submenus

Hello

I’m working on the following site: broomhillhyndlandchurch.co.uk

I have a couple of menu items that have submenus and want the little + symbol to be permanently displayed in white next to those menu items.

I have looked back at previous similar requests and want my site to behave the same as this one: https://www.evolocity.com.au/

I added the following code but it appears not to have made any difference - could you please help?

Thanks

@media (max-width: 1199px) {
    .main-navigation li.menu-item-has-children > .subnav-toggle,
    .main-navigation li.page_item_has_children > .subnav-toggle {
        color: #fff;
    }

    .main-navigation ul .subnav-toggle {
        width: 100%;
        text-align: right;
        padding-right: 90px;
    }
}
@media (max-width: 640px) {
    .main-navigation ul .subnav-toggle {
        padding-right: 30px;
    }
}

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.main-navigation ul .subnav-toggle::before {
  color: white;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi Roman

Thanks for your reply but unfortunately that still doesn’t seem to have done the trick.

As mentioned, looking for the + to be permanently displayed on the menu.

Thanks

Hello,

I have just tried to add that CSS code on your website using browser tools and it worked. How exactly did you add it? Did you try to clear your cache?

Kind Regards, Roman.
aThemes Support

Hi Roman

I have cleared the cache in my browsers and I have also cleared the cache in the WP dashboard but still appearing the same.

I added the code you provided me to the additional CSS section within the Customise menu.

Thanks!

The complete code reads as follows:

@media (max-width: 1199px) {
    .main-navigation li.menu-item-has-children > .subnav-toggle,
    .main-navigation li.page_item_has_children > .subnav-toggle {
        color: #fff;
    }

    .main-navigation ul .subnav-toggle {
        width: 100%;
        text-align: right;
        padding-right: 90px;
    }
}
@media (max-width: 640px) {
    .main-navigation ul .subnav-toggle {
        padding-right: 30px;
    }
}
		.main-navigation ul .subnav-toggle::before {
  color: white;
}

Hello,

I don’t see that code currently applied on your website. Can you please deactivate all plugins except Elementor, Kirki Customizer Framework, Contact Form 7, and leave here a note to let me check your website without additional plugins?

Kind Regards, Roman.
aThemes Support

I have now switched off all plugins apart from the ones you have listed.

Thanks

Okay, thank you.

Please try to move that CSS code to the top of your Additional CSS section, it should work there.

Kind Regards, Roman.
aThemes Support

Working now - thanks very much for your help!

Great, you are welcome! :slight_smile:

Kind Regards, Roman.
aThemes Support