Underlined Links on Homepage Menu Items

Hi guys,

See my website https://www.waterlely.nl/

On the homepage all the menu items that jump to a position on the same page get underlined.

Although I understand that from the point of view that an item gets underlined when you are on that page I was wondering if it is possible to have only the item underlined that we are currently watching.

Especially for one page websites, the way it is implemented now means that all links get underlined all of the time.

Hope there is a solution for this. Although it is not a showstopper it looks weird in the site.

Greets,
Olaf

Hello Olaf,

Please check these topics:


Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hello there,

Just chiming in as I know other alternative that might help.

  1. Edit your one page menu items in Appearance > Menus. Be sure you entered your site address. So it looks like: https://www.waterlely.nl/#wie-we-zijn
  2. Apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.
.main-navigation .current_page_item > a[href*="#"]{
  border: none;
}
  1. Install and activate the Page scroll to id plugin.

  2. Go to plugin settings panel, then tick the checknox that says “Enable on WordPress Menu links”. Save changes.

  3. Then apply the following custom CSS code:


.mPS2id-highlight{
  border-bottom: 1px solid #EAAB1C !important;
}

Regards,
Kharis

Hi Kharis,

Great wupport guys, that works like a charm except for on (minor detail, but still annoying :slight_smile: ) thing…

If you would go to (Chrome) https://www.waterlely.nl/ and select a menu item on the home page and move the cursor somewhere else it will show a fine dashed line around the item.

Any ideas how to get rid of that?

Greets,
Olaf

Hello Olaf,

To get rid of it, try adding this CSS code:


.main-navigation a{
  outline: none;
}

Regards,
Kharis

Thanks, that did the trick!