The site header block in GenerateBlocks gives you a lot of flexibility when building mobile menus, but it takes some time to get comfortable with the setup. Here are several techniques that streamline the process and improve the final result.
Start in the Right Viewport
The single biggest time-saver is working in the tablet and mobile viewport rather than mobile only. If the mobile menu is set to appear on both tablet and mobile, designing in mobile alone means repeating the work at the tablet breakpoint.
To make the mobile menu active at the tablet breakpoint, go to the navigation block and change the mobile breakpoint to 1024. From that point on, any changes made in the tablet and mobile viewport apply to both screen sizes at once.
Constrain the Menu Width
The default overlay panel spans the full width of the viewport. On most designs — especially when menu items are short — this looks oversized and feels heavy.
Select the menu container block, go to Sizing, and set a max width of around 300 pixels. This alone makes the mobile menu feel more contained and easier to interact with.
To align the panel to the right side of the screen (where the toggle button typically lives), set margin-left to auto on the same container. If your toggle is on the left, leave this as is and the panel will stay left-aligned by default.
Add a Logo Inside the Menu
Adding the business logo inside the mobile menu gives it a more polished, branded feel and gives users a familiar touchpoint to return to the homepage.
Insert an image block inside the menu container and add the logo. Set the width to around 100–125 pixels and add one rem of padding on the top, left, and bottom. Link the image to the homepage so it behaves the same way the desktop logo does.
Because the image lives inside the menu container, it will also appear on desktop. Select the image block, go to device visibility in the settings panel, and hide it on desktop.
Add a Box Shadow to Separate the Panel from the Page
When the mobile menu background color is similar to the page behind it, the two blend together and the panel loses definition. A box shadow on the menu container fixes this.
Under Effects, add a box shadow with an X offset of around -50, Y offset of zero, blur of around 150 pixels, and spread of around 50 pixels. Use a dark color — a dark gray or dark brand color works well. This lifts the overlay panel visually off the page and makes the menu much easier to read.
Update Menu Item Colors
Select the menu container and open the settings panel. Set the mobile menu item background to transparent, then choose a high-contrast color for the menu item text. Set a hover state with a solid background color and white text. Use a secondary background color for the current/active menu item so it stands out from the hover state.
Add a Call to Action Button
Every website has a primary action, and the mobile menu should reflect that just like the desktop header does.
Add a button block inside the menu container, below the navigation items. Wrap it in a container set to display flex with centered alignment. Set the button width to 100% and center-align the button text. Add one rem of margin on the left and right and about two rem on top to separate it from the navigation above.
As with the logo, check desktop after saving — if the button container appears there, go to device visibility and hide it on desktop.
What Else You Can Add
The mobile menu container accepts any GenerateBlocks block. Phone numbers, social icons, secondary navigation links, or promotional text can all be added the same way. The logo and CTA button examples above follow the same pattern: insert the block, style it, hide it on desktop.
