Return to previous page

Nav menu items background colour – how to set correctly?

This topic has 4 replies, 2 voices, and was last updated 2 months, 3 weeks ago ago by Luca Rossi

mecenas666

Participant

December 19, 2024 at 11:08

Hello, how can i change menu items background colour on our website (in attachment)?

I would like to have background colour for every menu items the same as current icon and menu item name colour. Different colour for every item. Then after applying background colour we need icon and text to be in colour #EFEAD8. In hover they should have white background and colour like they are now – colour for text and colour for icon.

Please also tell me how can i stretch vertically this items background to cover whole height of the section (now we have some space above and below item).

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#428059 Copied Theme version: 9.4.3

3 Answers

Luca Rossi

Support staff

December 20, 2024 at 02:31

Dear @mecenas666,

We hope this message finds you well.

We attempted to access your website; however, it seems that the WordPress Admin panel is not functioning as expected.

Could you kindly review this issue at your earliest convenience?

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

Files is visible for topic creator and
support staff only.

#428132 Copied

mecenas666

Participant

December 20, 2024 at 07:44

On my side it works perfectly. Cleared cache, please try again.

#428145 Copied
Luca Rossi

Support staff

December 20, 2024 at 09:49
Hi @mecenas666,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

[data-id="5ad9a26e"] .elementor-widget-wrap.elementor-element-populated { padding: 0; height: 72px; } body nav.etheme-elementor-nav-menu--main ul li { margin: 0 !important; } body nav.etheme-elementor-nav-menu--main ul li a { height: 72px; } body nav.etheme-elementor-nav-menu--main > ul > li > a > span { color: #fff !important; height: 72px; } body nav.etheme-elementor-nav-menu--main ul li a span:hover { background-color: transparent !important; } body nav.etheme-elementor-nav-menu--main ul li a img { filter: brightness(0) invert(1); } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3675 > a { background-color: #103547; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3684 > a { background-color: #C66D4A; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3665 > a { background-color: #9B4D34; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3666 > a { background-color: #cb837b; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3667 > a { background-color: #dbab6c; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3668 > a { background-color: #4D8C89; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3669 > a { background-color: #4B2743; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3670 > a { background-color: #8c8cab; } body nav.etheme-elementor-nav-menu--main ul li#menu-item-3734 > a { background-color: #80848c; }

Kind regards,
The 8Theme Team
#428159 Copied
Viewing 4 results - 1 through 4 (of 4 total)