Menu button background as gradient?

Support
#1

Is it possible to style the background from all inactive menu items with a gradient (background: linear-gradient(180deg, #FAFAFA 0%, #EFEFEF 100%)?

Thank you,
Michael

#2

Hey Michael,

With the correct CSS, it is possible. Regretfully though, providing custom development help or custom coding is outside the scope of our support so if you find that your code is not working, please consult with a 3rd party developer.

Thank you for understanding.

#3

Hi @christian:

I do not expect, that you provide me with a correct CSS. However, it would be nice to point me a direction. I do not find a correct class to add my css.

Therefore I can also ask: How can I add my own CSS Class to the background of the inactive menu buttons (without overwriting the color information of the active button?

Thank you,
Michael

#4

Hi Michael,

Regretfully, providing the custom development help is out of the theme support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered. Regarding adding a custom class to the menu items, please find the following article.

Hope it helps.
Thanks

#5

Well, I know this feature.
I do not need to change one field individually. I’d like to have just a gradient as a bg in all menu items (<li>)
But ok, I see and understand:

I understand. That’s the reasson.
Thank you. I liked themco so much for an outstanding support with great people @alexander @tristup @ruenel @jade and so much more. Seams this has an end.

#6

Hi Michael,

We are really sorry if you think that way. As per the support policy, customization questions are beyond the scope of the theme support. Still, I would suggest you use the background-image attribute of the <li> tag to add the gradient color like the example given below and read the article listed below.

background-image: linear-gradient(#EEE3E3 5%, #C5DDF0 45%, #B3CEE5 51%);

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()
https://www.w3schools.com/cssref/func_linear-gradient.asp

Hope it helps.
Thanks

#7

@tristup:
Thank you for your answer. May we have a misunderstanding?
I know how to add a gradient, I know how to customize via css.

The only thing I want to know: to what class should I add my custom css. What class is defined by PRO for the background of all inactive menu items.

The answer could be simple like:
“.e985-8.x-menu > li > .x-anchor”

But this class does also overwrite the color of an active button.
I only want to know the right class.

Thank you.

#8

Hi Michael,

The CSS selector should be like the following for the inactive menu items.

.x-navbar .desktop .x-nav >li:not(.x-active)

hope it helps.
Thanks

#9

Hello @tristup:

Thank you so much! This was the answer, I was looking for.

Best,
Michael

#10

Hi Michael,

Glad that we are able to help you.

Thanks

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.