[Support request] Vinyasa site primary menu buttons customization

[Szilard]

Hi there! I chose the VINYASA site from site library. It is simple to confugire and costumize the colors, typography, etc… but there are two buttons on the (top) right side corner of the primary menu that I cannot customize anywhere. I spent hours to solve this but I failed, which is very annoying. Could anyone help me in this case? Thank You!

[David]

Hi there,

both of those buttons are actual menu items – to change the Titles / URLS go to Customizer > Menus and edit the primary menu.

The button styling is achieved with this CSS found in Customizer > Additional CSS:

/* online classes menu button */
.main-navigation:not(.slideout-navigation) .main-nav li.online-button a {
    background-color: rgba(178, 139, 178, 1.0);
    color: #ffffff;
    border: 0;
    line-height: 40px;
    padding: 0px 24px;
    border-radius: 50px;
    margin-left: 20px;
    transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.online-button a:hover {
    background-color: rgba(178, 139, 178, 0.8);
    color: #ffffff;
    transition: all 0.5s ease 0s;
}

/* studio classes menu button */
.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a {
    background-color: rgba(132, 140, 183, 1.0);
    color: #ffffff;
    border: 0;
    line-height: 40px;
    padding: 0px 24px;
    border-radius: 50px;
    margin-left: 30px;
    transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a:hover {
    background-color: rgba(132, 140, 183, 0.8);
    color: #ffffff;
    transition: all 0.5s ease 0s;
}

[Szilard]

Thank you David! I mean the color costumizatuon of chorse… Just one more question, if I rewrite the CSS sheet with new color codes, it will be the new default setting, so it will not be affected by any future updates?

[David]

CSS in your Customizer > Additional CSS will remain even after updates to the theme.

[Megan]

Hi there! I’m having an issue with the menu colored buttons too. I deleted the menu item that had the “online-button” css attached, and now I can’t figure out how to add that CSS to a new menu item. Any ideas how?

[Ying]

Hi Megan,

This article explains it:
https://presscustomizr.com/snippet/adding-css-classes-wordpress-menu/

[Megan]

Perfect, thank you!

[Author]

Posts