Turn off rollover highlight for only one menu item

[irocarol]

Hi there,

I set up a custom link in my header and on hover, it still highlights the text as it does for the other pages in the header (I like the highlight for the other pages so those can stay). I’d like to turn off this highlight for just this menu item:

Basically I don’t want that smaller blue box popping up on the hover, just for that specific button.

www.apawturestudios.com

Thanks!

[prakash_s]

Hello @irocarol,

Thanks for writing to us.

I checked your website it seems that you have added custom CSS code to highlight the “BOOK IT” menu item. To get rid of this issue you need to remove your custom CSS code from Theme Option -->CSSor you can add this CSS code to override that style.

.bookit-menu-item a {
    background-color: transparent;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[irocarol]

Yes, I had added the CSS to style the menu item as if it were a button, so I won’t delete that as that’s not my issue.

That code helped, but I still can’t find how to hide the light blue line that animates in on the hover:

I would like to hide that line as well.

Thank you!

[tristup]

Hi @irocarol,

The line above the button comes as because you have set the Menu Item as a button, and the hover effect is the default behavior of it. Although you can achieve this by adding a small piece of custom CSS code to Theme Options > CSS

.bookit-menu-item .x-particle
{
    display:none;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Alternatively, as you are using Pro and it has the option to customize the Header using the Header & Footer builder, I would recommend you to remove the Button from the menu and add as elements into your header.
You can follow the below steps, on how to do that:

Step 1: Remove the menu element from the menu

Step 2: Add a Button element after the **Navigation Inline**

Step 3: And add the class `bookit-menu-item` to the **Button** element. 

Hope it helps.
Thanks

[irocarol]

Thank you, that code helped!

I didn’t want to add it after the navigation inline as a button element because then, on mobile it remained visible instead of moving into the collapsed hamburger menu. If there’s a better way to do that, please let me know! Otherwise, I’m happy as-is.

[prakash_s]

Hi @irocarol,

There is no other option to show button in the hamburger menu. You right If you add Button element next to Navigation element it would not show in the hamburger menu.

Thanks