Archived topic

Menu item - hover radius (rounded)

1 reply · Started by Nele on May 18, 2019

Viewing posts 1–2 of 2

May 18, 2019 at 11:38 am #903845

Dear,

I want a menu item (main menu) that looks like a button with rounded worners.

I found this on some of your earlier support topics as custom css:

.main-navigation {
border-radius: 5px;
}

This does the trick :-) but when I over over it, the corners are sharp again...Does anyone know how I can fix this?

kind regards
Nele

May 18, 2019 at 11:53 am #903852

Hi there,

Is it just a single menu item that you are looking for?

If so follow the steps here:
https://docs.generatepress.com/article/adding-buttons-navigation/

Then modify your CSS to this:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px; /*this number will likely need to be adjusted*/
        border-radius: 5px;
    }
}

If this doesn't help, any chance you can unlock maintenance mode so we can see the issue?

Let me know :)

This archived topic is closed to new replies.

Start building better websites today.