When I started building my first Master in Mosaic Builder, I assumed adding a navigation menu would be straightforward. Drop a menu element, connect it to my WordPress menu, done.
It took me an entire session to understand why that assumption was wrong — and what the correct approach actually is.
This article is for anyone who wants to understand how Mosaic handles navigation under the hood. There are 20 beautifully designed header blocks in the Library you can drop in and use immediately. But if you want to customize them confidently — or build your own from scratch — you need to understand what’s inside them first.
The first wrong turn — the Menu element
The first place I looked was the Builder section of the Add panel. There it is — a Menu element. I dropped it into my header, and it appeared on the canvas with some placeholder items.
Then I noticed something: the menu came with predefined dummy items that I had to delete manually. And more importantly — there was no way to connect it to my WordPress menu directly from the element settings.
After some digging I found the WP menu element — a child element you add inside the Menu. That’s the actual connector to your WordPress navigation menus. Select it, open the right panel, and you get a dropdown showing all your registered WordPress menus.
OK, so that works. Menu element → WP menu → your WordPress menu. The links appear on the canvas correctly.
But then I switched to mobile view. And nothing worked. No hamburger icon. No mobile menu. Just the full desktop menu trying to squeeze into a phone screen.
That’s when I realized the Menu element has no mobile behavior built in. It’s just a list of links. Nothing more.
The Navbar component — what it actually is
Going back to the Add panel, I noticed a separate section called Navbar. Inside it: two elements — Menu button and Navigation.
This is not the same as the Menu element. The Navbar is a complete, self-contained navigation system. And — importantly — Menu button only exists inside Navbar. You cannot use it as a standalone element anywhere else in Mosaic.
The Navbar component structure looks like this:
Navbar
├── Logo (optional — link with icon)
├── Menu button (the hamburger)
└── Navigation (the menu links)
Each piece has a specific job:
Menu button is the hamburger icon. On desktop it’s hidden (Display: None). On mobile it becomes visible and toggles the Navigation open and closed. It contains two Icon elements — one for the open state (three lines) and one for the close state (X).
Navigation is the menu container. On desktop it displays as a horizontal flex row. On mobile it switches to block display — which automatically stacks all menu items vertically. No JavaScript. Pure CSS display switching at different breakpoints.
Connecting it to your WordPress menu
Inside the Navigation element, you add a WP menu — the same connector element from before. Select it, choose your WordPress menu from the dropdown in the right panel, and all your menu items appear instantly.
One thing to note: if your WordPress menu has any items with child pages (sub-menus), the WP menu element will render a dropdown arrow on that item automatically. If you don’t want dropdowns, go to WordPress admin → Appearance → Menus and remove the indented child items.
How the mobile hamburger actually works
This was the part that made everything click for me. The hamburger menu in Mosaic is not powered by JavaScript. It’s a pure CSS toggle.
On desktop:
- Navigation → Display: Flex (row) — menu items horizontal
- Menu button → Display: None — hamburger hidden
On mobile breakpoint:
- Navigation → Display: Block — menu items stack vertically
- Menu button → Display: Flex — hamburger visible
When the hamburger is clicked, the Navigation panel appears as an absolutely positioned overlay, full width, dropping below the header. The menu items are already stacked vertically because of the block display. The X icon replaces the hamburger icon to close it.
No plugin needed. No JavaScript. Just two elements with their display toggled at different breakpoints. Once you understand this, you can customize the mobile menu panel completely — background color, padding, typography, animation — all from the Mosaic style panel.
The correct workflow
After all this exploration, here’s the workflow that works:
- Add a Navbar component inside your header container
- Inside Navbar → keep or customize the Logo, Menu button, and Navigation elements
- Inside Navigation → delete any predefined dummy items → add WP menu → select your WordPress menu
- On desktop → Menu button is Display: None, Navigation is Display: Flex
- On mobile breakpoint → Menu button is Display: Flex, Navigation switches to Display: Block
That’s the complete system.
What about the pre-built Library headers?
Mosaic ships with 20 pre-built header blocks in the Library (Assets → Block → Header). They are well-designed, responsive, and ready to use.
Now that you understand the Navbar architecture, you can open any of those headers and immediately understand what you’re looking at. You can swap the logo, change the WP menu connection, adjust the mobile panel styling, add a CTA button — all with confidence, because you know how the pieces fit together.
The Library headers are the starting point. Understanding the system is what gives you the power to go further.
One honest frustration
The Menu element and the Navbar component look similar in the Add panel, but they are fundamentally different things. The Menu element is a simple list. The Navbar is a complete responsive system.
There’s nothing in the UI that makes this obvious. You have to discover it by building — or by reading an article like this one.
Mosaic is a powerful, well-designed builder. But some of its architecture requires exploration before it makes sense. That exploration is exactly what this site documents.
I’m building buildwithmosaic.com as a resource for WordPress developers learning Mosaic Builder. If you’re coming from Elementor or JetEngine, follow along — I’m translating everything through that lens.