Plugin Support
Dhruv
(@dpandya)
Hi @randy210,
Both approaches work well, and the right choice usually depends on how different you want your mobile header to look compared to desktop:
Single header with responsive settings (works well for most setups) If your mobile and desktop headers share the same structure (same logo, same menu items, just rearranged or resized), it’s usually simpler to build one header and use Elementor’s responsive controls- per-breakpoint visibility, alignment, padding, font size, and column direction. Easier to maintain, since edits only need to happen in one place.
Separate mobile header template This makes sense when the mobile layout is fundamentally different, for example, a hamburger drawer with a completely different navigation structure, or a simplified mobile-only top bar. You get full creative flexibility, but you’ll have two templates to keep aligned as your site evolves.
A practical middle ground a lot of users go with: build one header, then use Elementor’s “Responsive > Hide on Desktop / Tablet / Mobile” controls to hide certain elements per breakpoint and show simplified mobile-only elements in the same template. That keeps everything consolidated without compromising the mobile experience.
I hope this clears your query, still if you need any further assistance please do not hesitate to reach out to us. We are here to help!
Best regards,
Dhruv – BSF Support Team
Plugin Support
Dhruv
(@dpandya)
Hi @randy210,
Just checking in on this thread since we haven’t heard back. Did the explanation help you decide which approach works best for your setup?
If everything’s sorted, no action needed, we’ll go ahead and mark this thread as resolved. If you have any follow-up questions or want to dig into a specific part of either approach, feel free to reply here.
You’re also welcome to open a new thread any time something else comes up.
Best regards,
Dhruv – BSF Support Team
