Site logo

Archived topic

Adding a gradient border at the bottom of the navigation menu

3 replies · Started by gleb on October 5, 2022

Viewing posts 1–4 of 4

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

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.

Worked like a charm, thanks

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

This archived topic is closed to new replies.