Add secondary menu to off canvas menu

Sure, it's https://www.greenfrogmovers.com/

Charles

Do you mean this gap?
https://www.screencast.com/t/pnorC6ktr

If so, it's the margin-top of the first container, try to remove or reduce the value.

And looking at your layout, you do NOT need to use a header element to merge the header with content.

Yeah, that's the gap on mobile devices.

I've removed the margin at the top of that page.

Could you explain a little more what you mean regarding the header element?

Thank you
Charles

This video shows how to merge header with the content, this is what your site is having right now:
https://youtube.com/watch?v=TP8mgBQTgGg&si=EnSIkaIECMiOmarE

But according to your site layout, I don't think you need this setting. If you disable the merge, the container does not need any top margin at all.

Hi Ying,

Ahh, that's great. Thanks for pointing that out.

On another point I've used this CSS to change the background colour of a link in the primary nav. But I can't seem to get it to work on desktop.

.main-navigation .main-nav ul li.contact-us-nav a {
background-color: #d45639; color: #ffffff;
}

What do I need to change?

I'm not seeing a menu item has the contact-us-nav class, how did you add the class?

I added it with the css class option in the menu settings.

It's the menu item in the slide-out navigation?

If so, it's working:
https://www.screencast.com/t/alda5j8s1y

I'd like to change it in the menu on desktop as well.

Charles

Do you mean this one?
https://docs.generatepress.com/article/block-element-site-header/

If so, the class is not added.

Hi Ying,

I removed the site header from elements.

I've added the class to the primary menu now as well. But it doesn't seem to have changed.

Charles

The CSS you added for that menu item is inside an @media query of 1024px. Move the CSS outside of that.

That's sorted it, thanks David.

Charles

Glad we could be of help