Archived topic

Nav Button CSS

2 replies · Started by Sonja on September 10, 2021

Viewing posts 1–3 of 3

September 10, 2021 at 5:42 am #1925419

Hi,

I've created a custom CSS on the item in the menu but I don't know how to make it look the same as the other buttons on the page?

When I used the CSS in the article about adding buttons to the menu it made it white with a black border not just the same as the other buttons on the site.

This is the page:www.scotlandbookclub.com

Thanks!

September 10, 2021 at 6:09 am #1925460

Hi there,

try this CSS:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        color: #ffffff;
        background-color: rgba(178,139,178,0.8);
        padding: 10px 20px;
        border-radius: 35px;
        line-height: 35px;
    }
    /* Set Hover Colors */
    .main-navigation .main-nav ul li.nav-button:hover a {
        color: #ffffff;
        background-color: rgba(178,139,178,0.7);
    }
}

You may want to change the rgba(178,139,178,0.8) color for the static and hover colors.

September 10, 2021 at 6:19 am #1925475

Hi,

This should do the trick:


.nav-button a {
    background-color: #467c96;
    border-radius: 4em;
    padding-left: 1em;
    padding-right: 1em;
    line-height: 3em;
}
.nav-button a:hover,
.nav-button a:focus {
    color: #888888;
}

You might have to put !important behind the padding-left, padding-right and line-height depending on if the get over ruled by the default styles.

Preview:
preview

I would recommend David's way. Was writing this reply while he posted his. 😅

This archived topic is closed to new replies.

Start building better websites today.