MegaMenu Dropdown Background Colour - Question | JoomShaper

MegaMenu Dropdown Background Colour

SD

Salvatore Debono

Helix Framework 10 months ago

Hi,

in the PRESETS / MENU settings there is "DropDown Background Color setting" which doesn't seem to work. Pse advise.

RGds Salvatore

0
14 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118335

Of course use your own bg colors, and please remember about good contrast between bg color and font color. Accessibility is important thing.

You're welcome. Mark topic as solved.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118025

Hi Salvatore,

it should work, at least on raw Helix Ultimate template, but first go to

  1. Advanced (tab) > SCSS > Compile SCSS to CSS - and turn it Off > Save changes
  2. Menu (tab) > Presets > Menu > DropDown Background Color > Change bg color > Save changes
  3. Advanced (tab) > SCSS > Compile SCSS to CSS - and turn it On > Save changes

Remember to Disable CSS compression first - before changes.

or use this Custom CSS

#sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: red;}
0
SD
Salvatore Debono
Accepted Answer
10 months ago #118060

Thats great ! It works.

Is it possible to have different background colours for each 1st. level menu item ?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118067

Only via custom CSS to can do that.

0
SD
Salvatore Debono
Accepted Answer
10 months ago #118073

Is there any documentation on this?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118076

sort of... read: https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

info_1170_2023.jpg

I used:

.sp-megamenu-parent .sp-dropdown.sp-dropdown-sub .sp-dropdown-inner {
  background: pink; }
0
SD
Salvatore Debono
Accepted Answer
10 months ago #118118

I saw the following CSS in another thread which changes the colour of the menu items:

.sp-megamenu-parent >li:nth-child(n) > a { color: #8ac53f !important; } .sp-megamenu-parent >li:nth-child(2n) > a { color: #2ab0ba !important; } .sp-megamenu-parent >li:nth-child(3n) > a { color: #f1c712 !important;

How can i change this CSS to effect the Drop Down Menu Background instead?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118122

You asked about bg color change, not font color!?

Please make mock-up what you really want and share link to that image, it will be easier for both of us.

0
SD
Salvatore Debono
Accepted Answer
10 months ago #118157

I am aware that this code changes the font colour.
I was wondering if it may be adopted and changed to give each menu-drop-down a different colour.

0
SD
Salvatore Debono
Accepted Answer
10 months ago #118237

Hi,

please excuse me if i mislead you!

Please have a look at the url: atlantisfernreisen.de
I want to have different dropdown-background-colour for each menu item. At the moment it is a green color throughout.

Thks/rgds

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118271

I wanted to check your site - but my browser and Avast said that:

Wait, this site is not secure

We found malicious code on this site that can cause damage to your computer or steal your private data. We recommend you not to open this site at all.

And there is possibility to set different color for each submenu. But request more customization. I am not sure it's still support or typical customization task.

In general you have to use custom Class name for Main menu items then define subcolor bg.

Do you need short video guide?

0
SD
Salvatore Debono
Accepted Answer
10 months ago #118272

Hi,

this is an old message which was not updated from Avast. This domain is clean and is regularly screened by our Webhosting service. We have repeatedly asked Avast to update their reports.

Yes please, i would appreciate guides on changing background colours.

Thank you.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118275

In my example (video): https://youtu.be/D-LYt-oqXUI

I used that:

.sp-megamenu-parent .pink .sp-dropdown .sp-dropdown-inner {
  background: pink; }

.sp-megamenu-parent .green .sp-dropdown .sp-dropdown-inner {
  background: green; }

Now it's your turn.

0
SD
Salvatore Debono
Accepted Answer
10 months ago #118314

It works pretty good.

Thks

0