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. ??

Hi @zoonini,

Thanks again for your help. I’ve added the custom CSS, and I’ve created the additional menu item for ‘Home’ by duplicating the ‘music’ menu 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.

I’ve encountered a few glitches now.
– Main menu:
– When I’m on the home page, it doesn’t underline the ‘home’ menu item.
– When I’m on the music page, it underlines both ‘home’ and ‘muziek’ items

– 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

Would you be able to help me with this?

It might be good to know that I’m using two header-templates, one for the home page and one for the other 3 pages.

Thanks in advance.

With kind regards,

Theije

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.

Thanks for your quick answer. Unfortunately, I tried adding a page link to the Navigation menu, however it doesn’t find my home page, see this screenshot: https://snipboard.io/EdUr5k.jpg .

If I enter the url of my homepage in the search bar, it also can’t find my homepage. I also tried to create a new menu item, but this has the same results.

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

Or is there another way to add a page link to the menu?

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.

Hi @zoonini , thanks for checking.

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.

I tried this, but it didn’t work unfortunately. For now, I have chose to leave the `Home’ menu item out, because I have to show the website this week to a colleague.

I would like try to add the custom CSS for a custom link, would you be able to provide this, without me adding the link to the menu?

@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. ??

Oh hang on, we’ve been going back and forth for so long I think I’ve forgotten what you had intended to do here.

Reading back in this thread, had you wanted to underline Home only when you’re on the homepage? In that case the CSS might be more like:

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

But once again… I’m just guessing. ??

Hi @zoonini , thanks again for looking into this issue.

I don’t seem to get the custom link to work. So I’ve decided to keep the overlay menu as it is.

I would like to try to have the overlay menu work like it does on this template:
paloma-fluid-demo.squarespace.com

I will start a new thread to ask if it is possible to keep the site title in the overlay menu.

Thanks again!

Alright – not sure why you had trouble adding the Home link, but thanks for starting a new thread to keep things more organized. ??