Remove underline selector on individual menu item

Support
#1

Hello

I’ve made one of my menu items into a button using instructions from a previous post on this forum. That’s all worked well but I have 2 problems I can’t solve:

  1. How do I remove the underline selector when you hover over the menu item, just for the one that is now a button (the one with the border)?

  2. Is there a way to keep the menu item as a normal item on the mobile menu? So no border around the link on mobile.

Test site is here: www.fatcatsoul.co.uk. It’s the ‘Make An Enquiry’ link.

Thanks in advance!

#2

Hey Adrian,

Please add a class to the Make an Enquiry menu item then add this Global CSS:

.x-navbar .desktop .x-nav > li.no-hover > a span {
    box-shadow: none;
}

The code above assumes that the class you have added to the menu item is no-hover.

Please add this code in the Global CSS:

.x-navbar .x-nav-wrap .x-nav > li > a span button {
    margin: 0;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

Hope this helps.

#3

Hi

Thanks so much for your reply. This solved my first problem (removing the underline selector). But the 2nd piece of CSS you gave me removed the border from the menu item on both mobile AND desktop. I’d really like the ‘Make An Enquiry’ button to be normal (no border) on the mobile menu but keep the border on desktop menu view. Is this possible?

Thanks for your help.

#4

Sorry, ignore my previous message - I realised I could just add a @media command before the last piece of CSS.

Thank you!

#5

We are delighted to assist you with this.

Cheers!

#6

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