A clean, uncluttered navigation experience can transform how visitors interact with your website. The Hamburger Menu—those three horizontal lines you see in the corner of countless modern sites—offers an elegant solution for keeping your layout streamlined while ensuring all your important pages remain just one click away. Today, we'll walk through everything you need to know about UENI's Hamburger Menu feature.
What is a Hamburger Menu?
A Hamburger Menu is a compact navigation button—typically represented by three stacked lines—that expands into a full menu panel when clicked. It's the go-to choice for mobile-responsive design, but many desktop websites use it too when they want a minimalist header that puts content front and center. When visitors click that familiar icon, they're greeted with your complete navigation in a clean, focused panel.
Part 1: Activating Your Hamburger Menu
Getting started with the Hamburger Menu takes just a few clicks. Follow this path in your UENI editor:
From your UENI Hub, click Edit Website
In the Editor, select the Pages menu
Go to the Home page
Click on the Header section
Select Menu to access menu settings
Look for the Type of Menu dropdown—this is where you'll make your selection
You'll see four options: Simple, Dropdown, Mega Menu, and Hamburger. Select Hamburger, and your navigation instantly transforms into the compact, expandable format.
Part 2: Core Hamburger Behavior Settings
Once you've selected Hamburger, you'll see several options that control how your menu behaves. Let's explore each one.
Menu Display Style
Choose how the menu panel appears when visitors click the hamburger icon:
Overlay: The menu panel slides in from the left with a transparent overlay covering the rest of the page. Your main content remains visible but dimmed in the background.
Offset: The menu panel slides in from the left, pushing your website content to the side. This creates a dynamic, app-like feel where the menu and content coexist.
Essential Menu Toggles
Below the display style options, you'll find several toggle switches that control fundamental menu behavior:
Sticky Menu: Keeps the navbar with the hamburger button visible as visitors scroll down the page. Turn this off if you prefer the navigation to disappear until users scroll back up.
Menu With Logo In Line: Displays your logo within the navbar alongside the hamburger button. Perfect for maintaining brand visibility without sacrificing screen space.
Split Menu Items With Center Logo: Creates a balanced layout with your logo in the center of the navbar. Note: When you toggle this on, "Menu With Logo In Line" automatically activates and cannot be turned off—it's all part of the centered logo experience.
Add Breadcrumb On Each Page: Shows website breadcrumbs on every page, helping visitors understand exactly where they are within your site's structure. This is especially useful for websites with multiple content layers.
Overlay Under Menu: Applies a semi-transparent overlay to the area outside your menu panel. Use the accompanying slider to adjust transparency from subtle to pronounced.
Menu Icon Style
Choose exactly how your hamburger button looks. Click the dropdown to select from five distinct icon styles.
Dropdown Trigger
Decide how submenu items behave:
Hover: Submenus appear when visitors mouse over a parent item
On-Click: Submenus appear only when clicked—offering more controlled navigation
Part 3: The Design Menu – Main Menu Tab
Click Design Menu to access the styling controls. You'll find two tabs: Main Menu and Hamburger Menu. Let's start with the Main Menu tab—these controls affect the navbar that contains your hamburger button.
Positioning & Spacing
Menu Position: Place your menu at the top, middle, or bottom relative to your website header
Padding Controls: Add breathing room with top padding, bottom padding, and spacing between individual menu items
Background & Color
Select your menu's Background Color and adjust its opacity for subtle transparency effects.
Hover Styles
Choose how menu items respond when visitors interact with them:
Underline: Add an underline on hover with adjustable thickness and color
Highlight: Apply a background highlight with customizable corner radius
Color: Simply change the text color on hover
Divider
Toggle dividers between menu items On or Off. If enabled, choose the divider color that complements your brand.
Navigation
Choose how subitems behave within your menu:
Open Down: Subitems drop down vertically from the parent item
Nested: Subitems expand horizontally or in a nested pattern
Typography & Alignment
Fine-tune your menu's text appearance:
Font Size: Scale to your preference
Format: Apply bold, italic, or All Caps styling
Alignment: Left, center, or right justification
Menu Font Color: Set the default text color
Border Controls
Toggle borders on or off, then customize:
Border thickness
Border style (top, bottom, or both sides)
Border color
Drop Shadow
Add depth to your menu with customizable shadows:
Toggle on/off
Shadow distance
Spread
Blur
Shadow color
Shadow opacity
Part 4: The Hamburger Menu Tab – Panel Styling
This tab is where you customize the expandable menu panel itself—the content visitors see after clicking the hamburger icon.
Panel Dimensions
Use the sliders to control:
Menu Width: How wide the expanded panel is
Menu Height: How tall the expanded panel is
Typography & Colors
Below the Navigation section, you'll find additional styling controls:
Hover Styles: Choose underline, highlight, or color change for interactive feedback
Menu Font Color: Set text color for all menu items in the panel
Background Color: Choose the panel's background color
Font Size: Adjust text size for menu items
Format: Apply bold, italic, or All Caps styling
Promo Feature
This is where you can add promotional content directly into your Hamburger Menu. Toggle the Promo option On to unlock these settings:
Select an Image: Upload or choose an image from your Media Library
Set Dimensions: Define width and height for your promo image
Alignment: Position the promo left, center, or right within the menu panel
Add a Promo Caption: Write compelling text that drives action
Choose Link Destination:
URL (external link)
Page (internal website page)
Call (phone number)
WhatsApp (WhatsApp number)
Send Message (activates your website's contact form)
Specific Block (link to a specific section within your About page)
Open in New Tab: Toggle this on for external links
Caption Color: Ensure readability and brand consistency
Part 5: Managing Menu Navigation Items
Back in the main Menu settings, below all design options, you'll find the Menu Navigation section. This is your command center for menu content.
Reordering Items
UENI makes reorganization intuitive. Simply click, hold, and drag any menu item to your desired position. Release to drop it into place.
Individual Item Controls
Each menu item displays three vertical dots (⋮) on the right side. Click to reveal:
Edit: Modify the item's title and behavior
Hide From Menu: Temporarily remove without deleting—perfect for seasonal content
Delete: Permanently remove the item
Adding New Menu Items
Click Add Menu Item to create custom navigation links.
Editing Menu Item Details
When you select Edit, customize:
Item Title: The visible text visitors will see
Link To: Choose from multiple destination types:
Specific Page URL (internal or external)
Another page within your website
Phone number (click-to-call)
WhatsApp number
Website contact form
Specific Product or Service from your catalog
Open in New Tab: Enable this checkbox for links that should preserve your website in the original tab
Best Practices for Hamburger Menu Success
Keep it concise: The Hamburger Menu works best with 5–7 main navigation items. Too many options can overwhelm visitors.
Consider your audience: If your visitors skew older or less tech-savvy, pair the hamburger with a visible "Menu" text label alongside the icon.
Test both display styles: Preview Overlay vs. Offset on both desktop and mobile to see which feels more natural for your content.
Use the Promo feature wisely: The promo space is prime real estate. Use it for high-priority offers, new products, or lead generation—not generic content.
Preview on mobile: While the Hamburger Menu is mobile-friendly by design, always preview how it looks and functions on actual smartphone screen sizes.
Don't hide critical navigation: If your primary conversion action (like "Book Now" or "Shop") needs maximum visibility, consider keeping it visible outside the hamburger in a dedicated button.