Docs

[darryl_corp]

Dear friends,

On my website https://darryljansen.com/ I would like to add a customized button on the right side next to “work with me” .

I would like to create something similar to this: http://www.leannahlumauig.com/ (see: coaching packages)
Where the font and style is the same as the rest of the menu just that it’s a complete stand alone button with hover color etc.

Would you be able to tell me how to create this for my website?

I’ve tried exploring several treads but could not find the solution I am looking for.

Thank you so much in advance.

Darryl

[Thai]

Hi Darryl,

Please add the new menu item to your menu with the CSS classes: x-btn-menu

http://i.imgur.com/D0RuBZD.png

After that add the following CSS under Customizer > Custom > Global CSS:

.x-navbar .desktop .x-nav>li.x-btn-menu > a {
    padding-top: 8px;
    box-shadow: none;
}
.x-navbar .desktop .x-nav>li.x-btn-menu > a > span {
    border: 2px solid #fff;
    padding: 8px;
    border-radius: 24px;
}
.x-navbar .desktop .x-nav>li.x-btn-menu > a:hover > span {
    background-color: #f0f0f0;
}

Hope it helps 🙂

[darryl_corp]

Hi Thai,

Thank you for your reply.

Sorry I might be wrong here but I can’t find the option to add a menu item to my existing menu – as extensive as you showed me in the screenprint here above.

Appearance> menus> custom links?

I only have two fields to fill in which are URL and link text. Same for when I approach it via the Customizer.

Thank you
Darryl

[Christopher]

Hi there,

Please navigate to Appearance -> Menus and enable necessary fields from screen options located on top right of page.

Thanks.

[darryl_corp]

Hi there,

You guys are amazing! I got it in the menu, perfect circle, looks really neat.

BUT, the alignment with the rest of the menu is slightly off. I tried playing with the margins but didn’t get it to change the way I want it too.

https://darryljansen.com/ is the website, you’ll see what I mean when you get there.

Thanks a lot, again!

Cheers

[Joao]

Hi There,

Please update this:

.x-navbar .desktop .x-nav>li.x-btn-menu > a > span {
    border: 2px solid #fff;
    padding: 8px;
    border-radius: 24px;
}

For this:

.x-navbar .desktop .x-nav>li.x-btn-menu > a > span {
    border: 2px solid #fff;
    padding: 8px;
    border-radius: 24px;
   margin-top: -11px;
}

Hope it helps

Joao

[darryl_corp]

Dear team,

You guys rock!
All works well now and looks very neat.

Thank you so much for your support!

Have a great day,
Darryl

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts