Remover border on the hover

HTML & CSS
1

In

How can I find out where that green line is coming from (in the menu)
I want to remove it

2

It’s
<span class="menu-highlight"></span>
I don’t see any CSS rules for it so I’m guessing JavaScript is involved.

The green is showing for both the “current” page and “on hover”.

It doesn’t show otherwise, so whatever the JavaScript (or maybe PHP?) is doing might over-riide, but if you want it to never show at any time you could try

span.menu-highlight {
  display: none;
}

It might not work, and it might mess up the design, but it would be an easy first try.

3

Yeah, it’s the styles on the span element inside the link:

<a href="/">Home<span class="menu-highlight"></span></a>

In the CSS, lines 299, 300 etc. in style.css.

4

Ah, I missed that in the dev inspector before, I must have been looking at a “hover” one.

#top-categories a .menu-highlight, #mobile_menu .menu-highlight {
    background: #9CF206 none repeat scroll 0% 0%;
}

So maybe an “inherit” would be better than a display none?

5

I suppose ideally just get rid of the span, if it has no other use.

6

Yes, my guess is it would make the height a bit shorter without breaking anything. And to my eye that wouldn’t make a noticeable difference.

7

It’s used for the current page item. I assume only the hover effect was to be removed?

e.g.

#top-categories a:hover span,  
#mobile_menu a:hover span {
	display:none;
}
#top-categories .current_page_item a:hover .menu-highlight,  
#mobile_menu .current_page_item a:hover .menu-highlight {
	display:block;
}
1 Like
8

Yeah, I just don’t see the need for a span for that. :frowning:

9

Yes you could use :after instead of the span you could probably style the anchor without :after but it already has linear gradients and borders so may be quite awkward to get exact.

The span (or :after) is needed if a hover effect is required because it fades in and out from the middle and would thus ruin the effect if you did that to the whole anchor.

1 Like
10

thanks all

11

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