[Support request] Change Background Circle Agency Primary Menu Contact Link

[Christy]

In the agency theme, on the primary menu, the contact link has a background color and it has a greenish background. I can’t figure out how to change that background color. Can you help me do that? It’s the paid version.

[David]

Hi there,

in Customizer > Colors in the Global Colors, you will see several prenamed colors.
That button uses

--base-3 for the text color
--accent-2 for the background color

If you change those colors the navigation button will update.

If you want to delve deeper then you will need to edit the CSS that is in Customizer > Additional CSS. It looks like this:

/* navigation contact button */
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
    color: var(--base-3);
    background-color: var(--accent-2);
    line-height: 44px;
    /* button height */
    padding: 0px 22px;
    /* space inside button */
    margin-top: 4px;
    /* adjust to horizontally align with other menu items */
    border-radius: 40px;
    margin-left: 22px;
    /* space to the left of button */
    transition: all 0.4s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
    background-color: var(--accent-2);
    transition: all 0.4s ease 0s;
    color: var(--base-3);
}

There are two CSS rules one for the static and one for the hover states.
The colors are defined using the CSS variables you found in the Global Colors eg.

color: var(--base-3);
background-color: var(--accent-2);

[Christy]

Thanks, there doesn’t seem to be an accent 2 for this theme, but I was able to edit the additional CSS. Thank you for the help. Have a nice weekend!

[David]

Glad to be of help!

[Author]

Posts