Underline on Hover Effect

Foundry
1

I’m using the following CSS to create a hover effect on Mega Menu. I’d like to create a 10px padding between the border and the Navigation text. Any suggestions; so far, I’ve came up empty?

.underline-on-hover:hover {
text-decoration: none;
border-bottom: 4px solid white
}

1 Like
2

I figured it out :wink:

.underline-on-hover:hover {
display:inline-block;
border-bottom:4px solid white;
padding-bottom:15%;
}

2 Likes
3

Hi,

I was curious to see how this looked, so I tried it on a project that I’m using Mega Menu on, but didn’t see any effect. Also, when I search the Page Source code, I can’t find the selector .underline-on-hover:hover. Also looked on the Mega Menu example pages, but didn’t see .underline-on-hover:hover in the source code there either.

So feeling pretty stupid as I’m probably overlooking something obvious. Any clue as to what I’m missing?

Thanks!

4

No worries @David, You would need to add the following as the title of your page on the Mega Menu.

%span class=“underline-on-hover”>PAGE NAME
CHANGE THE % to <

or, @webdeersign sent me this:

li.top-level-item:hover {
left: 0;
right: 0;
width: 100%
content: " ";
border-bottom: 5px solid #FFFFFF;
}

The first option would underline just the wording and the second option would underline the entire element.

1 Like
5

Thanks for sorting me out @dropgates. Those will be handy to have on hand.

1 Like
6

btw, I forgot to mention; on the second option, you don’t need to add the tag into the Title section.

1 Like
7

Thanks @dropgates! It did seem pretty clear from what you wrote and from looking at the code, but clarification is always appreciated. :slight_smile:

1 Like