Adding ‘home’ to overlay menu

Hi there @theye

1) First of all, I’d like to add a ‘home’ menu item, but only for the overlay menu, not for the menu on big screens

I think you’d need to go ahead and add your Home item to the menu and then add some custom CSS to hide it on the mobile menu. Adding a unique custom CSS class on the Home menu item (like home-menu-item) will make this easier. I’m happy to help with the CSS once you’ve done this.

That said, I would encourage you to consider keeping Home on both desktop and mobile menus, as it’s a navigation convention to have it there, and not everyone knows that they need to click the Site Title to reach the homepage.

2) I would like to undo the greyed out menu item ‘muziek’.

Looks like there’s something funky going on with the first menu item only, making it grey. This CSS should override it:

/* Mobile menu - change colour of first item */
.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item:first-of-type a:focus {
  color: #000;
}

We can see if it needs any tweaking once you add the new Home item. 🙂

I’ve chosen not to hide the ‘Home’ menu. I agree that it’s more clear when there is a ‘home’ menu item on the main menu.

Great. 🙂

– When I’m on the home page, it doesn’t underline the ‘home’ menu item.

I think that’s because you manually added a URL to the Navigation block, rather than selecting your front page from the list. Try selecting your homepage in the Navigation block instead. I just ran a test, and doing it that way does add the current-menu-item class to the homepage menu item, so it should pick up the custom CSS provided earlier to add an underline to that class.

– When I’m on the music page, it underlines both ‘home’ and ‘muziek’ items

For some reason, your Musiek page is adding the current-menu-item class to the Home menu item.

Please first try making the Navigation block change I mentioned above and see if that resolves both issues.

– Overlay menu:
– When on the home page, it doesn’t underline the ‘home’ menu item
– The home menu item is not greyed out on hover

Since these are also all related to the Home item, let’s wait until you’ve made the adjustment I mentioned above before making any other changes.

Hey @theye – I’m not sure why your homepage is not showing up in the list of pages.

The only way to add it, is to add it as a custom link, is this possible, with the CSS still being applied?

Not automatically, no.

I’d suggest that you give the page a title in the editor to see if that makes it easier to find in the Navigation block. You can then remove the title afterwards.

If that doesn’t work, add it as a Custom Link and extra custom CSS can be used to add an underline.

@theye I can give you some CSS, but it might not work, since I’m just guessing as to where the underline is coming from in the code. If it doesn’t work, I’ll need to see the Home item live on your site.

First step is to add a unique custom class to your Home menu item in the editor, like my-home

Then you can try custom CSS like

.wp-block-navigation .wp-block-navigation-item.my-home {
  text-decoration: none;
}

Again, don’t be surprised if this doesn’t work. 🙂