Custom submenu with original header

[Lyser]

Hello,
How to custom submenus with classic header.
I would like to change :

1. background color, font size and color
2. hover color
3. move submenu up or down

Also there is little delay when we enter (or go out) the buton for the sub menu to appear, how to make it appear/disapear instantly ?

[jade]

Hi Lyser,

@Lyser

1. background color, font size and color

To change the background color, you will have to target the sub-menu container. You can do that by writing the selector that targets it and setting the background color using the CSS background-color property..

The submenu selector is: .desktop .sub-menu

And to target the submenu links, you will have to use the selector: .x-navbar .desktop .sub-menu a then change the font size and color using the font-size and color properties.

If you want to know how to write a CSS selector, please check the following links:

• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

@Lyser

2. hover color

For the hover color, you will have to add the :hover selector to the menu items.

SO from .x-navbar .desktop .sub-menu a , it should be .x-navbar .desktop .sub-menu a:hover

@Lyser

3. move submenu up or down

You will have to target the submenu by writing again the appropriate selector for this which is .masthead-inline .x-navbar .desktop .sub-menu.

Since it is has an absolute position, you can move it by adjusting the value of the top attribute like this:

.masthead-inline .x-navbar .desktop .sub-menu {
    top: 70px;
} 

Hope this helps.

[Lyser]

This is perfectly explained, thx Jade ! =)

[paul.r]

You’re welcome!