[Dirk Fritsche]

Hey Team,
Happy new year to ya all.

Just some short questions about CSS Coding for further Menu Customization. See my attached image and the numbers 1) to 3).

1.1) How can I change the Background to another color.
1.2) How can I change the background color to 50% opacity.
Remark: I only want to make these changes to the dropdown-menu, not the main-menu itself.

2) How can I change the Color and size of the Border around the Dropdown-box
2.2) How can i change the box width -> Noch Fragen

3) How can I apply a hover effect regarding the text color (e.g. if i hover over the menu-item “Grafikdesign” the text shall be red)

4) How can I reduce the distance between the Dropdown-Menu and the Main-Menu.

Thanks for helping out.

BR Dirk

[Skandha]

@five-birds: Hello Dirk,
Can you please post in your site URL so that I can look into the issue?

Kind Regards,
Skandha

[Dirk Fritsche]

Hi Skandha,
the page URL is http://www.5bp.de

BR Dirk

[Dirk Fritsche]

It seems, that my image i prepared was not uploaded properly:

[Dirk Fritsche]

[Skandha]

@five-birds: Hello Dirk,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* To change the opacity of background color of the submenu and change border size and color */
.navigation-classic .main-navigation ul ul {
	background-color: rgba(0,0,0,0.5);
	border: 1px solid #f23456;
}

/* To change text color on hover */
#primary-menu li a:hover {
    color: #bc2b25;
}

/* To reduce distance between main menu and sub menu */
.navigation-classic .main-navigation a {
    padding-bottom: 0px;
}

Let me know if this solves the issues.
Kind Regards,
Skandha

[Dirk Fritsche]

Hi Skandha,
As alway quick and proper support. Thank you very much. This was excactly what i was looking for (i couldn´t find the correct div handles).

One last thing:

If you look in the dropdown menu with “Photo” the box underneath ich very wide. Is there a chance to reduce the width a bit ?

BR Dirk

[Skandha]

@five-birds: Hello Dirk,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.navigation-classic .main-navigation ul ul a {
    width: 150px;
}

You can change the width according to your choice.
Let me know if this works out!
Kind Regards,
Skandha

[brandtki]

This is great! Is there a way to change the primary menu font color?

[Skandha]

@brandtki: Glad you found your answer. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts