Solved Helix Framework

MegaMenu Dropdown background colour

Asked by Salvatore Debono 3 years ago Last activity 3 years ago

Hi,

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

RGds
Salvatore

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

3 years ago

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.

8 more replies

Paul Frankowski Senior Staff

3 years ago

Hi Salvatore,

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

Advanced (tab) > SCSS > Compile SCSS to CSS - and turn it Off > Save changes
Menu (tab) > Presets > Menu > DropDown Background Color > Change bg color > Save changes
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;}

Salvatore Debono Asked this

3 years ago

Thats great ! It works.

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

Paul Frankowski Senior Staff

3 years ago

Only via custom CSS to can do that.

Salvatore Debono Asked this

3 years ago

Is there any documentation on this?

Paul Frankowski Senior Staff

3 years ago

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

I used:

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

Salvatore Debono Asked this

3 years ago

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?

Paul Frankowski Senior Staff

3 years ago · edited

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.

Salvatore Debono Asked this

3 years ago

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.

Salvatore Debono Asked this

3 years ago

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

Paul Frankowski Senior Staff

3 years ago

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?

Salvatore Debono Asked this

3 years ago · edited

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.

Paul Frankowski Senior Staff

3 years ago · edited

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.

Salvatore Debono Asked this

3 years ago

It works pretty good.

Thks