Primary Navigation

Hi there,

Can you try the mobile header option?
https://docs.generatepress.com/article/mobile-header/

Make sure to read the suggestion here as well:
https://docs.generatepress.com/article/mobile-header/#branding-type

EDITED:

Thank you Leo. However, on scrolling down the top/bottom padding of the desktop and off canvas menu is too big and have not identified how to reduce it to zero padding without affecting the size of the logo/menu. Is it possible to get padding to zero?

Also I notice that the logo is not centred on mobile as selected but rather is sitting on the left. Is it possible to bring the logo and menu toggle closer on the off canvas menu? I could open another topic if that's preferred?

Hi there,

Can you go to customizer > layout > sticky navigation, click on the refresh icon to remove the value set for Menu Item Height?
https://www.screencast.com/t/5lESyf8FCY0d

Let me know if this helps :)

To align the logo to the center on mobile, try this CSS:

#mobile-header button.menu-toggle {
    position: absolute;
    right: 0;
}
#mobile-header .inside-navigation {
    justify-content: center;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Thank you the first worked:) The logo is still not centred on mobile despite the CSS. Also on mobile the logo looks disproportionately small compared to the desktop

The logo is still not centred on mobile despite the CSS.

Have you cleared cache after adding the CSS? I don't see the CSS has been added to the site.

Maybe try disable the cache plugin for now?

Hello, disabled the cache plug in, re-paste the CSS and cleared cache. I have added the CSS with the simple CSS plug in. It hasn't taken effect yet on making the logo centred on mobile

Can you add the CSS to customizer > additional CSS to test?

Hello, it has worked now thank you:)

Great!

You are welcome :)