Mobile Header
Create a dedicated mobile header and navbar as an alternative to your desktop header, with its own layout, logo, menu and content.
Your site header and navbar may not always fit well on smaller screens. In YOOtheme Pro, you can switch from the desktop header to a dedicated mobile header at the breakpoint that works best for your layout.
Start with the overall layout and arrange your logo, menu and header content side by side in horizontal layouts with different alignments. If needed, use separate mobile versions of the logo and menu, and publish alternative content in dedicated mobile positions.
Just like the desktop header, you can make the mobile header static, sticky, or show it only when scrolling up, and optionally make it transparent.
The dedicated mobile dialog position lets you open the menu in a dropbar, an offcanvas sidebar or a modal window. This gives you the flexibility to show only the logo and dialog toggle in the mobile navbar, while moving the main menu and additional content into the dialog. For example, add a call-to-action button or show contact information.
You can also add search and social icons directly to the mobile navbar or inside the dialog without creating extra modules or widgets. Show the search as an input field or as an icon that opens the search in a dropdown, dropbar or modal window, including live search results.
