Plumbit's Mobile Header has its own provider, logo, Mobile Menu location, toggle, contact area, and mobile sticky controls. Configure it separately from the desktop Main Header, then test the open and closed states at a real narrow viewport.
Before you begin#
- Confirm whether the mobile area uses Theme Options or Elementor.
- Record the current Mobile Menu assignment before changing it.
- Make sure the desktop header works and keep a backup or staging copy before structural changes.
- Have a real phone or responsive browser available for touch, submenu, orientation, and keyboard checks.
Open the mobile header settings#
Open the WordPress Customizer, then open Header > Mobile Header. The available controls include Mobile Header Layout Type, Choose a Header, Mobile Logo, Custom Logo Size, mobile logo sizing, mobile contact and search toggles, Enable Sticky Mobile Header, Enable Mobile Top Header, Mobile Menu Position, and Mobile Top Header View.
Configure the mobile logo#
Use Mobile Logo for a separate mobile image. When no mobile logo is supplied, the theme uses the main Logo. Use Custom Logo Size and the available width, height, or maximum-width controls when the default proportions need adjustment. Keep the image proportions intact. Plumbit does not require one fixed logo dimension. Use an image with suitable proportions and adjust the available sizing controls as needed.
The separate Sticky Logo belongs to the Sticky Header section. If Elementor owns the mobile header, edit the selected Elementor Header template instead of changing the theme mobile logo controls.
Configure the Mobile Menu#
Assign a saved menu to the Mobile Menu location in How to assign Plumbit menu locations. The theme mobile header reads this location directly. It does not fall back to Main Menu: when Mobile Menu is unassigned, the theme mobile header renders no mobile navigation items. Use a shorter mobile menu when the site needs a simpler touch-first navigation. The theme sticky header reuses the primary Main Menu location, so it does not require another menu location.
An Elementor-owned mobile Header template is separate from the theme mobile header. Plumbit's Header Mobile widget reads the theme Mobile Menu location, while the Header Nav Menu widget reads Main Menu; these widgets do not provide a separate saved-menu selector.
Configure the toggle#
Use Mobile Menu Position to choose Top or Side. In Top mode, the hamburger button expands or collapses the mobile menu area below the header. In Side mode, the hamburger button opens or closes the side panel, and clicking outside the panel closes it. The selected Elementor mobile Header template has its own toggle presentation and must be edited in Elementor.
Configure the mobile panel#
For the theme mobile header, use Enable Mobile Header Contact Area, Enable Mobile Search Button, and Enable Mobile Top Header for the optional areas. Use Mobile Top Header View to choose Display or Toggle. The Side mode also provides toggles for contact details, address details, opening hours, social links, and the quote button. Top mode expands the menu area below the header; Side mode opens the fixed side panel and closes it from the hamburger button or by clicking outside.
Configure mobile sticky behavior#
Use Enable Sticky Mobile Header when the theme mobile header should remain available while scrolling. Test this separately from Enable Sticky Navigation in the desktop Sticky Header section. Elementor mobile output is governed by the selected Header template and its responsive behavior.
Test submenus#
Open the mobile menu#
Use the hamburger button and confirm that the Top menu or Side panel appears.
Expand a nested item#
Test the submenu toggle on a top-level Mobile Menu item with children. Plumbit hides nested items until their toggle is pressed, then expands them below the parent item.
Test navigation#
Check parent links, child links, touch targets, long labels, keyboard focus, and orientation changes.
Close the menu#
In Top mode, press the hamburger button again. In Side mode, press the hamburger button again or click outside the panel. Confirm that the page is usable after closing it.
Preview and publish#
Use the Customizer preview to check the narrow layout, but verify the result on a real device or responsive browser. Test the homepage, a normal page, a post, and a page with a submenu. Publish only after confirming the provider, Mobile Menu assignment, logo, toggle, and mobile sticky state.
Expected result#
The mobile header displays the intended logo and menu, opens and closes reliably, exposes usable submenus, and remains readable at narrow widths without covering page content unexpectedly.
Common problems#
Support escalation#
Send the device and browser, screen width, affected URL, Mobile Menu assignment, provider, screenshot or recording, browser-console error, Plumbit version, WordPress version, and PHP version. Do not send passwords. See Getting support for Plumbit.
Mobile Logo/Toggle Area Contact Text#
Review Mobile Logo/Toggle Area Contact Text with the mobile logo and toggle settings so the compact header presents the intended contact message.
Related articles
How to configure the Plumbit theme header
Configure Plumbit's theme-provided top, main, sticky, and mobile header areas without confusing them with the page title banner or an Elementor header template.
How to assign Plumbit menu locations
Assign the correct WordPress menu to Plumbit's Main, Footer, Mobile, or Top Header location and understand when an Elementor header is separate.
Troubleshooting Plumbit headers
Diagnose missing, duplicated, stale, overlapping, sticky, mobile, and Elementor-owned Plumbit headers by checking the source before changing settings.