Create interactive "buttons" in menu bar

Support
#1

I would like to add a custom “button” to the menu bar and have searched through some of the forum results and am seeing a few different answers/solutions…whether it be custom CSS or a shortcode. There was a post that showed some CSS using #item_id, and replace that with the menu item ID, but I can’t figure out how to find what the menu item ID is. And this was a post from Feb 2018. So maybe there is a better way now?

I am wondering what is the latest and best/easiest way to add a button to the menu bar (that also is interactive when hovered on)? I found this site that has one as an example. This was a site that was listed in one of the forum posts asking how to do the same thing I am asking: https://nimuefichtenbauer.com/ (Join The Program button in menu bar)

Some other sites have “buttons” for things like “Log In” and “Register”

Thanks for the info!

-Chris

#2

Hi Chris,

Thank you for writing in, that “Join the Program” button on “https://nimuefichtenbauer.com/” is a menu item that is styled. It was styled using this custom CSS.

.x-navbar .desktop .x-nav > li:last-child > a > span {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 3px;
    background: #27c6b2;
}

You can also use that if the menu item that you want to style is the last item just like the “Join the Program”. But if not, then you need to use ID e.g. .x-navbar .desktop .x-nav > li#menu-item-4128 > a > span

Finding Nav Menu Item I.D

If that did not work, please provide us your site URL so we can take a closer look.

Cheers,

#3

Hi Friech,

Thanks for your reply!

I tried this CSS and yes, it does emulate what’s at that site I mentioned in my original question. And I did then locate how to find the menu ID.

My site is capizate.com

Was going to try and make the Get Started button look different than the others. But it is in the middle of the menu bar.

Get Started menu ID is 2648 (found when using the method in the link you provided)

I then edited the CSS you gave but altered the first line, as you also suggested so it should read:

.x-navbar .desktop .x-nav > li#menu-item-2648 > a > span
display: inline-block;
padding: 10px 20px;
border-radius: 3px;
background: #27c6b2;

But it did not do anything. And when I changed the top line to:

.x-navbar .desktop .x-nav > li#menu-item-2648 > a > span

the CSS window was showing a red dot (assuming that’s an error in the CSS?) on the next line highlighting the : after the word display.

The original unedited CSS you provided, from that example site I gave, did work though.

Additionally, once I figure this out I’d also like to know:

  1. How would I make the boarder line thicker? I see how to change the background color, and assume I can just put transparent if I wanted that, but what if I want a thick colored boarder?
  2. How do I get the button to transform color upon interaction?

Thanks for your additional help guys!

#4

Hi Chris,

The ID of Get Started menu item is 264, not 2648

.x-navbar .desktop .x-nav > li#menu-item-264 > a > span {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 3px;
    background: #27c6b2;
}

Use this very same selector .x-navbar .desktop .x-nav > li#menu-item-264 > a > span but add :hover pseudo class so it will effect on hover e.g. .x-navbar .desktop .x-nav > li#menu-item-264:hover > a > span

CSS :hover Selector

The CSS property that you need is the border-width.

You can check your custom CSS here and address the errors.

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!

#5

Thanks Friech! I will give all of this a try…appreciate your help, esp with the CSS!

#6

You’re most welcome,

Cheers!

#7

Hello,
This is really helpful! I’m trying it on my site and I need some help with the hover aspect. I’ve added the suggested css but the background isn’t changing color and instead is adding a shadow. I haven’t added this in purposely so I’m not sure where it’s picking up from. What can I do to make the background color change and get rid of the shadow?

Thanks!

#8

Hi Julianne,

You can use this same selector .x-navbar .desktop .x-nav > li#menu-item-264:hover > a > span , but remove the #menu-item-264 since you dont want this to be applied to one specific menu-item.

Add this to Theme Options > CSS to remove the outline (shadow)

.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 !important;
}

Hope it helps,
Cheers!

#9

Hi! I’ve problem with add btn in menu.
My website www.czarna-dama.pl
When I adding a custom css there is some problem

Zrzut ekranu 2021-08-13 o 15.27.01
Zrzut ekranu 2021-08-13 o 15.27.012522×1298 235 KB

Button is to large… This look very nice https://nimuefichtenbauer.com/”

#10

Hi Kasia,

I have checked your website but didn’t find the issue shown in the given screenshot. If you are still seeing the same output without adding any extra custom CSS code, there might be some issue with the cache. I would suggest you check once by clearing all types of cache and in the incognito/private mode of the browser.

I would also suggest you clear the Style Cache from X/Pro > Settings > System > Clear Style Cache. If that does not resolve the issue, I would suggest you create a new thread and please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks

#11

Hello Kasia,

I have inspected your site and it appears that you have inserted this custom CSS:

.x-btn.my-btn-class {
   color: #ffffff;
   border-color: #ec6434;
   background-color: #ec6434;
   position: relative;
   top: -15px;
}

.x-btn.my-btn-class:hover {
   color: #ffffff;
   border-color: #600900;
   background-color: #ef2201;
}

The code above were applied to the menu item itself. You must edit your code and only apply the CSS to the menu item link. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Screen Shot 2021-08-14 at 5.12.26 AM
Screen Shot 2021-08-14 at 5.12.26 AM1652×266 96.9 KB

Therefore in your case, you will need to use:

.x-btn.my-btn-class a {
  /* your sting here */
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Best Regards.

#12

Ok, thank u, but is still something wrong… I see changes in backend, but not in frontend…

#13

Hello Kasia,

I can see that you have updated the menu item class yet done it incorrectly.

Screen Shot 2021-08-14 at 5.59.36 AM
Screen Shot 2021-08-14 at 5.59.36 AM850×578 57.2 KB

It should only be “x-btn my-btn-class”.

#14

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