Font style change and dot to show up on hover


What we would like is that when we hover over ‘Contact’ in the navbar, the text will be in bold, and the dot underneath will appear.

We managed a bit of that using mouse trigger for the dot, and adjusting the settings for the text block when hovered. Our issue is that the dot and ‘Contact’ are in two separate containers (sorry if we aren’t using the right terms here). So when you hover over the area within the div block for the dot, the font isn’t always in bold.

We don’t know how we change it so that if someone hovers within the Contact-Tab link block as a whole, the dot shows up AND the text will be bolded.

Can we get some help on this please? :pray: Thanks!

Read-only link here.

One very simple trick/solution :slight_smile: put white border-bottom to all nav links (2px for example) - and change the border to blue on active state.

Your hover issue ==> Not clear. Maybe add an example

My bad.

This is what we are aiming for:

We don’t need the line that slides over to change colour every time.

The only way to solve this is by custom code (Like the tutorial you added).

Sorry to trouble you again. We tried to figure it out based on the video. But as non-coders, this is proving to be challenging! We vaguely know what the codes meant, and still can’t figure out how to get the line to slide over when hovering.

We’ve placed the tab line underneath ‘Home’ tab to start, and the hover effect on the line works. But when you hover on the ‘Home’ tab, the line doesn’t show. We know this is because it’s not contained WITH the ‘Home tab’. But if it’s contained with the ‘Home’ tab, wouldn’t the line not be able to slide over to the ‘About’ tab when we hover over the ‘About’ tab?

Sorry to solve this I need to try this (This is very specific effect).
Anyway add live URL -or- read-only link.