Menu-item shown in navbar as button

Support
#1

Hi there,

I would like to change one menu item in the navbar to a button with colors, like on this page: http://testserver1.us/ where it says ‘purchase books’. What’s the best way to achieve this?

I tried to do it with the class option in the menu-item to point to the CSS text for the button which I put in the style.css in the childtheme. But somehow it doesn’t show how it’s meant to be. Does it maybe conflict with other CSS somewhere else?

#2

Hi @andre1980,

X doesn’t have a way to support buttons as navigation items. As this gets into custom development, I won’t be able to provide a fix getting things the way you want, but I can provide some advice:

  1. Try using Pro. I see you already have a Pro license, so you might be familiar with it. The included header builder would make this pretty easy to do.

  2. Using a child theme and customization the navigation view you can add the button next to the WordPress menu output.

  3. Use custom CSS to override X native navigation styling. This snippet will remove the underline effect when hovering on any link items. It might help you get started with your own changes:

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
  box-shadow:none;
}
#3

Hi,

Thanks for your advice. I was able to make a button next to the menu items. But I still have some things I don’t know how to alter, like:

  • How can I change the position of the button inside the navbar, preferably at the same height as the other menu-items.

  • How can I change the background color and text color of this specific button. I set a color for it, but it gets the default color like all buttons on the site.

I hope you guys can help me with this. Thanks in advance!

#4

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

li#menu-item-616 a {
    padding: 0;
}
li#menu-item-616 button {
    height: 100px;
    margin-top: 15px;
    color: #000;
    border-radius: 0;
    background-color: #f0f0f0;
    border: none;
}
#5

Maybe I’m missing something here, but this won’t help, even when I change the menu-itemnumber to the correct number.
Let me show you which website it is where I would like to have a button for on the navbar, either as menu item or seperate button:
https://www.testomgevingwebsite.nl/demeubelwerkplaats/
–> ‘Contact’ (menu-item 450) / or a seperate Contact-button

The button is shown ot top, while it should be on the same level as the other menu-items and the colors of this button need to overrule the default colors for buttons.

I hope there is a way to make this work.

#6

Hi There,

Please try adding this CSS instead:

.x-menu-item-button a {
    margin-top: 20px;
}
1 Like
#7

Thank you guys! :thumbsup: That made it move to the right position and I could add a different colour for the text and background of the button :wink:

#8

You’re welcome! :slight_smile: