Background in second level menù items

In my menu, my second level items that appear when people hover on first level items are displayed in white, with white background. So I need to change the background, making it transparent. But how can I do it? In Upfront I cannot find the option to decide wich color is the background of second-level menu items. Can you help me please?

  • Katya Tsihotska

    Hello Guido

    How are you doing?

    As I see, you are using Twenty Seventeen theme on your site. Please, confirm that the question relates to Fixer theme. If so, open Menu element settings in your Upfront editor, then go to Appearance > Edit Default Preset > Edit Preset CSS, find there following code:

    div.upfront-navigation[data-style="horizontal"] ul.sub-menu, div.upfront-navigation[data-style="vertical"] ul.sub-menu {
        background-color: #f5f5f5;
    }

    As for me, I've found the code at line 19, I suppose that you can find it there too.

    Then, replace the line
    background-color: #f5f5f5;
    with
    background-color: transparent;

    Let me know if it works for you. Feel free to ask any additional questions, I'll be happy to help.

    Best regards,
    Katya

  • Guido

    Hi,

    As I see, you are using Twenty Seventeen theme on your site. Please, confirm that the question relates to Fixer theme. If so...

    The question does not relate to fixer theme, but to Twenty Seventeen theme.

    If so, open Menu element settings in your Upfront editor,

    In TwentySeventeen there is not Upfront editor (right?).
    Where can I edit the preset CSS in TwentySeventeen?

    thanks
    guido

  • Katya Tsihotska

    Hi Guido

    Apologize for misunderstood you.

    You are right, there is no Upfront editor in TwentySeventeen theme. So, if you want the background in your second level menu would be transparent, you should paste the following code into Appearance > Customize > Additional CSS section:

    #top-menu .sub-menu {
        background-color: transparent;
    }

    If you want your second level menu items would be transparent on hover, you should also add this:

    @media only screen and (min-width: 48em) {
    	#top-menu .sub-menu li:hover {
    		background-color: transparent;
    	}
    
    	#top-menu .sub-menu li a:hover {
    		color: hsl( 30, 50%, 46% ); //you may change this color to any color you need, except of white
    	}
    }

    Let me know if it helps.

    Best regards,
    Katya