Customize Menu item into CTA

[jgreenberg]

Hello,

I would like to turn one of my mobile menu items into more of a button CTA that has contrast from the other menu items.

Can you help me do this?

[friech]

Hi Joseph,

Thank you for writing in, you can add a button element to your header that will only show on mobile view using the Hide During Breakpoints feature, that button will then serve as your CTA on mobile.

Hope it helps,
Cheers!

[jgreenberg]

Hello Friech,

I do understand what you are referring to but perhaps I was not clear in what I was reffering to.

I would like to customize one of the menu items inside the inline mobile menu modal so that it looks more like a call to action and less like a regular menu item. Please see screenshot below:

[friech]

Hi Joseph,

Thank you for the clarification, on the Appearance > Menus area, you can apply a class x-btn to spacific menu item. That x-btn class will give your menu item a button look.

Rearranging, Configuring Menu Items

• 

You can also add another class in case you need to customize that menu button.

e.g.

.x-btn.myclass {
 /*Custom CSS rule here*/
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[jgreenberg]

Hello Friech,

This is certaintly a lot closer to what I was talking about and did work a lot better but when trying to customize it further I ran into a lot more difficulty because I could not change the text color as well as change things when on hover.

[ruenel]

Hello Joseph,

If you have followed the instructions given by @Friech, you can change the text color with a little css. You may have something like this:

.x-btn.myclass {
 /*Custom CSS rule here*/
}

.x-btn.myclass a{
 /* text color */
}

.x-btn.myclass a:hover{
 /* text color */
}

This custom css is only given to get you started with your customization. For more information about the CSS styling, you can refer to this tutorials:

• https://www.w3schools.com/css/default.asp
• https://www.w3schools.com/tags/tag_a.asp

Hope this helps.