I created a menu bar with white background and gradient menu-items. On the background of the nav I have gradient colors clipped to the text.
But when I want to use a dropdown in it, the dropdown menu-title is transparant (or white) but doesn’t get the gradient, which the normal items do have:
On the dropdown items I would like to have the gradient to, don’t know how to create that.
Environment info
Hi @Lijn-B ,
Sorry to hear you’re experiencing trouble with this.
Could you possibly let me know where you are applying your link styling?
Additionally, if you could share a frontend link with me, I might be able to take a closer look at this.
Thank you in advance.
Hi @Araminta,
The frontend link is: https://elkevangenugten.lijn-b.dev/
I provide you a login by email.
Thank you for providing that so quickly, @Lijn-B!
In fact, your gradient text effect is being applied to the Nav items block, which is incorrectly targeting dropdown links (which explains their transparency).
Instead, these styles should be applied from the Nav block, from the Styles tab > Link style:
Unfortunately, there is currently a bug with the clip-text property, preventing its proper functioning.
Rest assured, we’ll be sure to find a fix for this as soon as possible.
While we work on resolving this issue, I would recommend adding the following custom CSS to your Nav block:
#blockid .cc-nav-item {
-webkit-background-clip: text;
}
Apologies for the inconvenience.
Hi Amarinta,
Thank you foor looking in to it.
But I don’t get it to work.
On de nav-block container I fill the gradient background and add the css code.
The link text color is transparant.
But I get a compleet gradient nav container, in stead of the menu items.
Sorry to hear that, @Lijn-B
To ensure that the gradient text is correctly applied, be sure to:
Once you have done so, kindly let me know if the issue persists.
Thank you in advance.
Hi @Araminta,
Thank you for providing a solution this quick.
I tried the solution and yes it gives a gradient to all menu-items and the dropdown item.
But these menu-items having all te same complete gradient.
I was trying to create one gradient over all menu-items.
And that worked until I created the nav drop down item
I want a gradient like the div above from purple to green over all items together. now each item has the same gradient.
I want the div color gradient copied to the menubar. The left button is most purple, the right button almost completely green.
Greetings Bob.
I haven’t tested this, so this is not guaranteed to work, but to achieve what you want, you may be able to use background-size and/or background-attachment: fixed for the gradient and apply the same gradient to both the main menu and the dropdown.
This will require you to size the gradient accordingly to fill the width of the whole viewport, which would be needed anyway to cover the submenu.
As long as it has browser support, it should work, but as I said, I haven’t tested and don’t have time to today.
Hello everyone,
First of all, I’d like to thank you for uncovering an issue with relative styles not applying as well as the background-clip property, this should be fixed in 1.2.9.7.3.
As for the issue @Lijn-B encountered with the dropdown title being transparent, this is because .cc-nav-dropdown__button has its position set to relative. You can modify it to static to properly apply this effect using the Dropdown styling option in the Nav block.
Hope that clears a few things up.
Cheers,
