Buttons on Navigation Menu

Support
#1

Hi There,
I just read one of the post here and I found out that it is not possible to put a button on Menu in X theme. https://theme.co/apex/forum/t/how-do-i-put-a-button-in-the-navigation-menu/68727

Would there be any workaround for this?

I appreciate your help on this. Thank you.

#2

Hello Shlomo,

Yes, there is a workaround for this.

You can add a class to the menu item then add a custom CSS to set a background color to that menu item.

To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class highlight to the menu item.

Once the menu is saved, go to X > Theme Options > CSS then add this code:

.x-navbar .desktop .x-nav>li.highlight span {
    background-color: green;
    border-radius: 8px;
    display: block;
    padding: 6px;
}

Feel free to change the value in the code above.

Hope this helps.

1 Like
#3

This helped me so much! Thank you for saving me all that time, I really appreciate it!!!

#4

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

1 Like
#5

It worked! Thank you!

Just last thing that I want to ask, it seems that something overrides my text-alignment.

May I ask what to do about this? The text is not aligned to other Menu items. I want to align them so that it will look good and possibly change the font color. My additional css is not working.

.button {
color:white;
background-color: rgba(196, 26, 5, 0.98);
border-radius: 0px;
font-size: 12px;
text-shadow: grey;
display: block;
padding: 1px 1px;
}

I hope you can see what’s wrong with this one. Appreciate much of the help. Thank you very much!

#6

Hello Shlomo,

I am not seeing the button in your site. By the way, have your code updated and use this:

.button {
color:white;
background-color: rgba(196, 26, 5, 0.98);
border-radius: 0px;
font-size: 12px;
text-shadow: grey;
padding: 1px 1px;
}

Hope this helps.

1 Like
#7

It’s on my staging site, Ruenel.
I hope you can see it here:
freefinancialself.com/staging

There’s no changes on the alignment of the text. I don’t know what option on settings to change. I think I tried it all.

And still, the color doesn’t change either.

#8

Hello Shlomo,

Please update your custom css and use this instead:

.x-navbar .x-nav-wrap .x-nav li.button a{
    height: auto;
    color:white;
    background-color: rgba(196, 26, 5, 0.98);
    border-radius: 0px;
    font-size: 12px;
    text-shadow: none;
    padding: 15px 10px;
}

Feel free to adjust the values.

1 Like
#9

Hello Ruenel,

Thank you for helping me a lot right now. But it is still now working when I try it.

Here’s what I have.

I hope it’s okay with to just give you an access to our staging site on a secure note.

#10

Hello Shlomo,

I have edited your menu. I added my-button class and then updated the css code into this:

.x-navbar .x-nav-wrap .x-nav li.my-button a{
    height: auto;
    color:white;
    background-color: rgba(196, 26, 5, 0.98);
    border-radius: 0px;
    font-size: 12px;
    text-shadow: none;
    padding: 15px 10px;
}

I cleared your plugin caches and the button is now displaying.

Check your site again.

1 Like
#11

It works! Now I know what happened.

Thank you very much, RueNel. I really appreciate this.

#12

We are delighted to assist you with this.

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.