Greyd.Suite comes with the core Simple Header, whereas the mobile menu (overlay menu) is very basic with no customization available.
With WordPress Full Site Editor (FSE), the header is a block-based template, fully editable, without customizer option or Header builder widget available in a classic theme (like KadenceWp).
For creating the hamburger menu, Greyd.Suite has a pop-up block that allows more customization than default block-theme.
I used this tutorial created by Thomas (the mobile section starts at 1:55 in the video), and I recreated it a few times to understand better how everything is connected.
Creating Hamburger Menu in Greyd.Suite in 3 steps
Start with default structure of the Header Simple: there are 2 Groups, 2 Rows and 1 Navigation element.
1. Set the overlay menu to Off for the main Navigation – hidden for larger devices (image 2)
This Navigation element will be available just for larger devices, so it has to be hidden for mobile and table.
2. Create the Overlay using the Popover block of Greyd.Suite: switch the Popover button to burger and set the popover as Overlay. There are many options for styling. The whole element should be disabled for the larger screens.
3. Copy the Main Navigation element in the Popover Overlay
Adjust the settings for mobile: Justification – left, Orientation – Vertical
Here is the Demo of this tutorial, following the steps shown in the screenshots above:
