Adding button to header menu

[Heike_Eco]

Hi there,

I’d love to add a button to the header menu as in the image below:

I have tried several CSS code additions and but none of it seems to produce a similar looking button.

Anyway I could possible add this?

Thank you, Heike

[mldarshana]

Hi There,

Thanks for writing in! The most appropriate way is to enable Top bar and your button HTML into Topbar content area. To do that, please head over to X -> Theme Options -> Header and enable Topbar first.

<a class="x-btn" href="" title="More">Free Trial</a>

Or else try adding the same HTML into a menu item, using Custom Link

Hope that helps.

[Heike_Eco]

Hi there,

The first suggestion adds the button to the top of the header and not inline with the other menu items.

The second suggestion does not create a solid button and it does not move with the menu items when the header shrinks on scrolling.

Is there anything else I can try?

Thanks,
Heike

[ruenel]

Hello There,

Thanks for updating in!

To resolve your issue, please go to Appearance > Menus and do the following:

• Add “Start My 21 Day Challenge” menu item along with your href or link.
• Find the Screen Options and enable the CSS classes (http://prntscr.com/ke37kl)
• Insert a custom menu-btn class in your menu item (http://prntscr.com/ke37xd)
• And lastly, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

#x-root .x-navbar .menu-btn a {
    padding-top: 30px;
}

#x-root .x-navbar.resize-navbar .menu-btn a {
    padding-top: 5px;
}

#x-root .x-navbar .menu-btn a span{
    padding: 10px ;
    background-color: #F5595F;
    color: white;
    border-radius: 8px;
}

You should have something like this:

Hope this helps.

[Heike_Eco]

@RueNel

#x-root .x-navbar .menu-btn a {
padding-top: 30px;
}

#x-root .x-navbar.resize-navbar .menu-btn a {
padding-top: 5px;
}

#x-root .x-navbar .menu-btn a span{
padding: 10px ;
background-color: #F5595F;
color: white;
border-radius: 8px;
}

You’re a genius! Thank you it worked perfectly

[ruenel]

You’re welcome!
We’re glad we were able to help you out.