Adding underline to current menu item

Hi @theye – not sure where you got that CSS but it’s not something that’ll work in this theme.

Let’s look at your items one by one:

– remove the underline on the site title (I would still like it to link to the home page).

This CSS should remove the default underline and hover underline on the site title:

/* Site title - remove underline */
.wp-block-site-title a,
.wp-block-site-title a:hover, 
.wp-block-site-title a:focus {
  text-decoration: none;
}

– remove underline of menu item on hover, and add greying out of menu item on hover

This should do the trick. You can modify the shade of grey as you like:

/* Menu hover & focus */
.wp-block-navigation .wp-block-navigation-item a:hover, 
.wp-block-navigation .wp-block-navigation-item a:focus {
  text-decoration: none;
  color: #a1a1a1;
}

– add underline for the current menu item

The Navigation Block does not come with a class for the current page, so there’s no automated way with CSS to apply an underline to all current menu items at once. There is an open enhancement issue for this in GitHub.

That said, since you have only three pages in your menu, you could target them individually. In order to do that, you’d first need to add a custom class to each menu item, like this example for your About page:

Once you’ve added a custom class to each of your three pages – for example, they could be musiek / about / contact – let me know and I can take a look at the necessary custom CSS to have those underlined only on the relevant “current” page.

@uxl You are absolutely right, thanks for noticing that, don’t know how I missed it!

@theye You can ignore my suggestion about adding a custom class, as Uxl’s CSS above should do the trick. Let us know how it goes, and please mark this thread as resolved if all your customizations have been taken care of.

@ninglexi Looks like you got a reply on your own thread. If you need further help with it, please continue there.

@theye Are you all set?

Hi @theye I think I already answered your two questions above and provided CSS – would you like to have another look?

https://ww.wp.xz.cn/support/topic/adding-underline-to-current-menu-item/?view=all#post-15918102

Let me know if that does the trick.

Awesome, glad to hear it, and you’re very welcome!

1) is there a way to grey out the site title on hover?

This should do it. You can replace the colour code with whatever you prefer:

/* Site title - grey on hover */
.wp-block-site-title a:hover {
  color: #666666;
}

2) is there a way to underline the site title when it is the current page?

Could you explain what you mean a bit more by the “current page”? The Site Title links to the homepage, so did you want it underlined only on the homepage?

@theye If you want to keep the site title underlined on the homepage, remove this CSS I gave you previously:

/* Site title - remove underline */
.wp-block-site-title a,
.wp-block-site-title a:hover, 
.wp-block-site-title a:focus {
  text-decoration: none;
}

And use this instead:

/* Site title - remove underline everywhere except homepage */
body:not(.home) .wp-block-site-title a,
body:not(.home) .wp-block-site-title a:hover, 
body:not(.home) .wp-block-site-title a:focus {
  text-decoration: none;
}

If you need help with something else, please feel free to start a new thread. Thanks!

Awesome, glad to hear it!