[Resolved] Creating a radius on main nav

[Louis]

Hi,

Modifying the Catalyst site. I put a background color on the main nav in the header and would like to create a radius to make the menu items appear as rounded rectangle buttons. Perhaps add a border as well.

I’ve been using the Web Developer tools in firefox and the source and looking for clues in all the css files, but, no matter what class or id I try to get the result, they all fail.

Thanks for any assistance.

Lou

[David]

Hi Louis,

first of you need to go to the Customiser > Colors > Primary Navigation and set the primary menu and sub menu backgrounds to transparent.

Then use this CSS:

.main-navigation .main-nav ul li a {
    background-color:  rgba(3,66,78,0.82);
    border-radius: 10px;
    margin: 5px;
}

[Louis]

Thanks David. Perfect.

Enjoy your weekend.

Lou

[David]

You’re welcome Louis

[Author]

Posts