Create a custom CSS-only hamburger navigation menu for your SmugMug site. No JavaScript required - generates pure HTML and CSS code.

The Hamburger Menu Builder lets you create a custom navigation menu for your SmugMug site. It generates pure CSS code (no JavaScript) using the checkbox hack technique, making it lightweight and compatible with SmugMug's content blocks.

How it works

This builder creates a responsive navigation menu that:

Shows a traditional horizontal menu on desktop
Collapses into a hamburger menu on mobile devices
Uses pure CSS for the toggle animation (no JavaScript required)
Works within SmugMug's HTML content blocks

The generated code uses the "checkbox hack" - a CSS technique that uses hidden checkboxes to toggle menu visibility without JavaScript.

Use the interactive builder below to design your navigation menu. Add links, create dropdown submenus, customize colors, and preview on desktop and mobile.

Live Preview

Hover over menu items to see hover effects

Logo Configuration

Logo Text

Menu Items4 items

Hover over menu items to see hover effects

Generated Code

<!-- ========================================
     NAVIGATION HTML
     Copy everything inside the nav.sm-nav
     ======================================== -->

<nav class="sm-nav">
  <!-- Checkbox MUST be direct child of nav, before sm-nav-inner -->
  <input type="checkbox" id="sm-nav-checkbox">

  <div class="sm-nav-inner">
    <!-- Logo -->
    <div class="sm-nav-logo">
      <a href="/">
        My Site
      </a>
    </div>

    <!-- Hamburger (label for the checkbox) -->
    <label for="sm-nav-checkbox" class="sm-nav-hamburger">
      <span></span>
      <span></span>
      <span></span>
    </label>

    <!-- Overlay (also a label to close menu when clicked) -->
    <label for="sm-nav-checkbox" class="sm-nav-overlay"></label>

    <!-- Menu -->
    <ul class="sm-nav-menu">
      <li><a href="/">Home</a></li>

      <li><a href="/galleries">Galleries</a></li>

      <li><a href="/about">About</a></li>

      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</nav>

Once you've designed your menu and generated the code, follow these steps to add it to your SmugMug site.

Open SmugMug customization

Go to your SmugMug site and click "Customize" to enter the site editor.

Navigate to Entire Site

In the customization panel, select Entire Site to add content that appears on all pages of your site.

Add an HTML content block

Add a new content block and choose HTML. This block type has two tabs: one for HTML and one for CSS.

Add the HTML code

In the HTML tab of the content block, paste your menu HTML code from the builder (click "Generate Code" and copy from the HTML tab).

Add the CSS code

Switch to the CSS tab in the same HTML content block and paste your CSS code from the builder.

Make sure you paste the CSS into the CSS tab of the HTML content block, not into the HTML tab.

Remove default content block padding

SmugMug adds 12px padding to all content blocks by default, which creates a transparent border around your menu. To remove it:

Hover over the HTML content block in the Entire Site section
Click the triangle icon that appears over the block
In the measurement popup that opens, set all spacing values to 0px

This ensures your navigation stretches edge-to-edge without any gaps.

Save and test

Save your changes and test the menu on both desktop and mobile devices. Click the hamburger icon on mobile to verify the menu opens and closes correctly.

Keep it simple Limit your main navigation to 5-7 items. Use dropdowns sparingly for sub-pages.

Use descriptive labels Keep menu labels short but descriptive. "Galleries" is better than "Photos" or "All My Photography Work".

Test on real devices After adding the menu, test it on actual mobile devices - the responsive behavior may differ slightly from desktop browser simulations.

Consider your logo If using an image logo, make sure it's optimized for web and the height is appropriate for your navigation bar.

Troubleshooting

Menu doesn't toggle on mobile

Verify both the HTML and CSS were added correctly to their respective tabs
Check that the CSS checkbox selectors match the HTML structure
Clear your browser cache and reload

Dropdown menus don't work

Ensure the dropdown checkbox IDs are unique
Verify the CSS includes the dropdown styles
Check for conflicting CSS from your SmugMug theme

Styling conflicts with SmugMug theme

The generated CSS uses sm-nav prefixed class names to avoid conflicts
If issues persist, try increasing CSS specificity by adding more specific selectors
Check if SmugMug's navigation is set to "Hidden" in your theme settings

Menu appears behind other elements

Add z-index: 1000; to the .sm-nav rule in your CSS
Check for other elements on your site with higher z-index values

Hamburger Menu Builder

How it works

Build your menu

Add the menu to SmugMug