Sub Menu Not defined properly

I have noticed that the sub-menus in the themes are not defined properly. Currently working with Spirit. The drop down menu had no background. I had to add CSS to add one as there was no option to add different values for sub-menus anywhere. Most of my clients won't know how to do this and will get stuck at this point.

Would also love to have option of transitions for the sub menu that pops-up.

If I add a border between the sub menu items, the highlight and border have a tiny space in between. This is due to some global css which is applied to the ul tag making it 2em. Will be great is some attention is also paid to how sub-menu items appear as a lot of websites nowadays do require sub levels.

Also the little triangle that opens the sub-menu is totally overlapping the main menu name. It should be at a slight distance.

  • Nithin

    Hi Erum,

    Hope you are doing good today. :slight_smile:

    In order to make changes to the submenu, you'll have to edit the default menu preset, otherwise it could get overridden by the preset settings. You can find that once you click the menu settings, under Appearance > Edit Preset CSS.

    Thank you for providing your suggestion, I'll forward these to the developers, as mentioned all of these changes can be carried out by custom CSS rules. For the little triangle, you can try the following CSS: > a::after, > a::after {
        right: 3px;

    I hope this helps. Please advise if I have missed out anything. Have a nice weekend. :slight_smile:

    Kind Regards,

  • Kasia Swiderska

    Hello Erum,

    Then as soon as I changed the color of the top bar from black to pink, the sub-menu went all crazy. It should be black with a yellow hover background. But it is all transparent now.

    Do you remember if you did something more? I'm testing this issue on my site and I changed color of the menu region and submenu is still black, yellow on hover. I'm wondering what else could trigger this strange color change.

    kind regards,

  • Kasia Swiderska

    Hello Erum,

    This time I did replicate it when I changed first menu to my own. I've send message to developers about that issue in case it is already reported. I prepared small CSS fix for that:

    div.upfront-navigation div[data-style="horizontal"] > ul.sub-menu,
    div.upfront-navigation div[data-style="vertical"] > ul.sub-menu {
        background: rgba(0, 0, 0, 0.7);
    div[data-style="horizontal"] ul.sub-menu > > a, div[data-style="vertical"] ul.sub-menu > > a {
        padding: 10px 1.5em;

    Let me know if this will help for missing background on your site.

    kind regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.