A Hamburger Menu is the three-line icon that expands into a full menu when clicked. It keeps your header clean and puts your content front and center, while every important page stays one click away. It's ideal for mobile, and works beautifully on desktop too. Let's dive in!
Step 1: Turn on the Hamburger Menu
From your UENI Hub, click Edit Website.
In the UENI Editor, open Pages and go to your Home page.
Click the Header section, then select Menu.
In the Type of Menu dropdown, choose Hamburger.
Step 2: Set how the menu behaves
Menu display style
Overlay: the panel slides in from the left and dims the page behind it.
Offset: the panel slides in and pushes your content aside, for an app-like feel.
Menu toggles
Sticky Menu: keeps the menu bar visible as visitors scroll.
Menu With Logo In Line: shows your logo next to the hamburger icon.
Split Menu Items With Center Logo: centers your logo in the menu bar.
Add Breadcrumb On Each Page: shows visitors where they are on your site.
Overlay Under Menu: dims the area outside the panel. Use the slider to set how much.
Warning: Turning on Split Menu Items With Center Logo also turns on Menu With Logo In Line, and it can't be switched off while the center logo is active.
Icon style and dropdown trigger
Menu Icon Style: pick from five hamburger icon styles.
Dropdown Trigger: show submenus on Hover or On-Click.
Step 3: Style the main menu bar
Click Design Menu and open the Main Menu tab. These settings style the bar that holds your hamburger icon.
Position and padding: place the menu at the top, middle or bottom of your header, and adjust spacing.
Background color: choose a color and opacity.
Hover styles: underline, highlight or color change.
Divider: add dividers between items and pick their color.
Navigation: subitems can Open Down or be Nested.
Typography: font size, bold, italic, All Caps, alignment and color.
Border and drop shadow: set thickness, style, color, blur and opacity.
Step 4: Style the menu panel
Open the Hamburger Menu tab to style the panel visitors see after clicking the icon.
Menu Width and Menu Height: use the sliders to size the panel.
Hover styles, font color, background color, font size and format.
Promo
Turn on Promo to feature an offer inside your menu. You can:
Choose an image from your Media Library and set its size and alignment.
Add a caption and caption color.
Link it to a URL, page, phone number, WhatsApp, your contact form or a specific block.
Open external links in a new tab.
Step 5: Manage your menu items
Back in the Menu settings, scroll to Menu Navigation.
Reorder: click, hold and drag an item into place.
Item options: click the three dots next to an item to Edit, Hide From Menu or Delete it.
Add Menu Item: create a new link with a title and destination, such as a page, URL, phone number, WhatsApp, contact form, product or service.
Pro tip: Add a custom form to your Hamburger Menu by linking to its form URL.
Best practices
Keep it to 5 to 7 main items so visitors aren't overwhelmed.
Preview Overlay and Offset on desktop and mobile to see which feels best.
Save the Promo space for high-priority offers.
Keep your main action, like Book Now, visible as a header button.
Final thoughts
Save your changes and preview your site. Congrats, your website now has a clean, modern menu that keeps your content in the spotlight!