Docs

[Jared B]

Howdy, here’s my URL: https://chiroculture.com/

We’d like the Free Resource link in the navigation to be a button to draw extra emphasis. I’ve tried adding a button as described on this thread, but haven’t been able to make it work: https://community.theme.co/forums/topic/add-buttons-to-navigation/

What is the best way to go about acheiving this?

Thanks!

[Rue Nel]

Hello There,

Thanks for writing in!

You can edit your menu item in Appearance > Menus and add a class x-btn x-btn-regular the class field. And then you also need to add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a.x-btn.x-btn-regular {
    height: auto;
    padding-top: 0;
    padding: 5px;
    margin-top: 45px;
    color: #fff;
}

.x-navbar .desktop .x-nav > li > a.x-btn.x-btn-regular:hover {
    border-color: transparent;
    color: hsl(0,0%,46%);
}

Please see this screenshot: http://prntscr.com/b6x439

Hope this helps.

[Jared B]

When I apply that CSS, here’s what happens:

[John Ezra]

Hi there,

Thanks for updating the thread! Please remove previous advice (class and CSS), and use the following CSS instead.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

li#menu-item-26846 a span {
    background-color: #74CCD4;
    color: hsl(0, 0%, 100%);
    padding:20px;
    margin-top:-20px;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-color: hsl(185,54%,69%);
}

li#menu-item-26846 a:hover span {
    border-color: hsl(185,59%,31%);
    background-color: hsl(185,55%,42%);
    box-shadow:none;
}

Hope this helps – thanks!

[Jared B]

Thank you, John! Perfect!

[Rahul]

You’re welcome. Let us know if you need any further help 🙂

Cheers

[Author]

Posts