[Resolved] Adding a gradient border at the bottom of the navigation menu

[gleb]

Hello,

I want to add a gradient border underneath my main navigation menu to create a visible separation from the content. Here’s a great example of what I want to do: https://www.leafly.com/news/cannabis-101/what-is-thcv-and-what-are-the-benefits-of-this-cannabinoid

You can see there’s a dark grey-to-light gray gradient border under the navigation. I imagine I need to add some kind of gradient/background CSS to my header or nav menu div.

Would appreciate any help

[Jean Paiva]

Hello Gleb,

First, in the customizer go to Layout > Header and make sure the Header width is set to Full and Inner Header Width is set to Contained.

Once that is done add this custom CSS:

.site-header {
    box-shadow: 0 4px 8px rgba(0,0,0,.16);
}

Hope that help.

[gleb]

Worked like a charm, thanks

[Jean Paiva]

Cool, glad I could help. Have a great day!

[Author]

Posts