Menu items underlined when hover, and permanent underline on selection

Hi

I’ve seen a similar thread asking this question, and I think it requires custom CSS input. Although it would make a good additional feature to the text interaction options.

I’m basically trying to replicate Renew Demo 2.

Upon hover, the Navigation link needs to appear with a 1px underline in blue (rgb(1, 137, 201)), and also when the page is selected/displayed, i’d like the selected page to appear with the underline fixed in place. Is this possible?

Also interested in replicating the exact same feature for the Collapsed Navigation Menu

Thanks

Hi there,

Thanks for writing in! Can you please share the URL of your site so we can take a look and suggest you a solution accordingly?

Thanks!

Hi Nabeel

The site is still in the early build stages, but you can find it here… https://fidelity-manufacturing.com

Many thanks

Hi there,

Were you able to get this sorted?

I have just checked but I can’t seem to see the underline in the menu items when hovered:

Hi Jade

No, haven’t been able to sort this.

Any help would be appreciated.

Thanks

Hello @chrisholden84,

Thanks for asking. :slight_smile:

On my end I also don’t see underline under navigation on hover. I have recorded a screencast that you can take a look. https://cloudup.com/cm3LPJQtTTa

Can you please share few screenshots?

Thanks.

Hi

I think you’re maybe mis-understanding my enquiry.

I would like to ADD to the Navigation…

  1. On hover, the Navigation link appears with a 1px underline in blue (rgb(1, 137, 201))
  2. When the page is selected/displayed, i’d like the selected page to appear with the underline fixed in place.
  3. Replicating the exact same features for the Collapsed Navigation Menu

These features are NOT implemented and running on the site. At the moment all I have is the ability to highlight each navigation link in blue, but this isn’t my desired effect.

See image of Renew Demo 2, what I am trying to accomplish…

Hello @chrisholden84,

Thanks for updating the thread and I am really sorry for the confusion.

Thanks for clarifying the question. Please try out following solution.

In header builder navigation inline element, under Top Links > Border > Style (select Solid) > Width (1px) > Color (select intractoin color). At the same time select bottom side. https://cloudup.com/cHr7Ay6VEJL

Let us know how it goes.

Thanks.

Hi Prasant

This helps to add an underline under the navigation box, but it doesn’t add an underline under the navigation text?

How would i go about adding this?

Thanks

Hi There,

For the text underline, that should be added using particle partial


Please watch The “Particle” Partial video.

Hope this helps.

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