The Omniverse Header Builder allows you to create separate header layouts for desktop and mobile devices, ensuring your website remains fully responsive across all screen sizes.
Desktop and Mobile Layouts #
The header builder provides two dedicated layout areas:
- Desktop Layout – Applied to screen widths 1025px and above, typically used for laptops, desktops, and large displays.
- Mobile Layout – Applied to screen widths 1024px and below, including tablets (portrait and landscape) and smartphones.
You can switch between these layouts using the Desktop Layout and Mobile Layout buttons available in the header builder toolbar.
This separation allows you to design device-specific headers without affecting other layouts.
Configuring Mobile Header Layout #
To customize the mobile header:
- Switch to the Mobile Layout view.
- Add and arrange elements the same way as in the desktop header.
- Adjust spacing and structure for smaller screens.
For better usability, keep the mobile header simple. Common elements include:
- Logo
- Mobile navigation menu
- Cart icon or widget
- Essential information in the top bar (if required)
A clean mobile header improves performance and user experience.
Visibility and Row Settings #
You can also customize how header rows behave on different devices.
Available options include:
- Setting different row heights for desktop and mobile
- Hiding specific rows on desktop or mobile devices
- Adjusting layout for better responsiveness
For example, if your top bar contains secondary navigation that isn’t needed on mobile devices, you can edit that row and enable the Hide on Mobile option.
