Header and Navbar Layouts

YOOtheme Pro gives you full control over your site header and navbar, from simple navigation bars to advanced, content-rich menus. Choose from prebuilt header layouts to arrange your logo, navigation and header content in a structure that fits your site.

Place them side by side in horizontal layouts with different alignments, stack them in the center in different orders, or keep the logo and navbar stacked on the left while showing additional header content on the right. You can also split menu items or header content around a centered logo, or evenly justify the navigation across the full width. This makes it easy to build anything from a compact business header to a spacious, editorial-style navigation.

Define how the navbar behaves while users scroll. Make it sticky so it stays visible, show it only when scrolling up, or make the header transparent so it blends seamlessly into your layout.

For larger navigation structures, use flexible dropdowns and dropbars. Align dropdowns to their menu items or to the navbar, or open a full-width dropbar for spacious, content-rich mega menus.

You can also add a dialog toggle to the navbar and show additional menus or header content in a dropbar, offcanvas sidebar or modal window without changing the main header layout.

Add search and social icons directly to the navbar 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.

For smaller screens, replace the desktop header with a dedicated mobile header at the breakpoint that fits your navigation. The mobile header has its own layout and settings, so it can look and behave completely differently from the desktop version.