Indigo Background Main Menu Colors - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Indigo Background Main Menu Colors

C

conshelf

Template 4 years ago

Hello,

I'm having an issue changing the background active 7 hover colors for the main menu. I've added the following CSS in the custom CSS but it's not working.

.sp-megamenu-parent>li.active>a {
    font-weight: 700;
    background-image: linear-gradient(
100deg, #afd2e8, #afd2e8);
    color: #fff;
    padding: 0 30px;
}

The override appears in the CSS when I inspect it, but the colors do not change. I've tried in Chrome, Edge and Safari.

Kind regards, John

0
4 Answers
Order by
Oldest Newest Votes
C
conshelf
Accepted Answer
4 years ago #37452

Hello,

I resolved the issue, apparently this needs to be added as well.

.sp-megamenu-parent>li>a:before, .sp-megamenu-parent>li>span:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(
100deg
, #afd2e8, #afd2e8);
    z-index: -1;
    transition: 0.3s;
    opacity: 0;
}

Would be nice if the mega menu had more robust styling capabilities.

Kind regards, John

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #37454

Hi,

Glad that you have made it! There should be menu color options in your custom style within preset tab of the Template options I think.

Best Regards

0
C
conshelf
Accepted Answer
4 years ago #39836

Hi Rashida,

I tried using the custom colors, but that didn't change the background hover colors.

Kind regards, John

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #39924

Hello,

Got it! It wasn't the menu item text color but the background hover color effect. Thanks for the clarification.

But, only the following line of code in your custom.css file should change the background color:

.sp-megamenu-parent>li>a:before, .sp-megamenu-parent>li>span:before{
background-image: linear-gradient(
100deg
, #d51ccd, #f5f561);
}

You can change the two color codes to change the gradient to your own choice!

Best Regards

0