Full Width Navigation with Active Search
Sometimes there is a need to fit more navigation items in main navigation.
This is when full width navigation could be handy. This menu style can be set by adding classes .full-width-nav and .container to the
.navigation-search div tag. This layout uses featured search that is placed to the right of the website's logo. Please note, that the logo include (branding.html) is placed inside of the .section-default div to show visual separation between branding and navigation sections. Make sure to switch order of search include with the navigation because search include in this case needs to go before the navigation include to match visual tabbing order. Also, .featured-search class needs to be added to the #head-search div to keep search visible.
This menu version doesn’t uses icons to save some vertical real estate. However, you can apply icons to it.
Full width navigation with active search header example:
<header class="global-header fixed"> <div id="skip-to-content"><a href="#main-content">Skip to Main Content</a></div> <!--#include virtual="/ssi/utility-header.html" --> <!--#include virtual="/ssi/settings-bar.html" --> <div class="section-default"> <!--#include virtual="/ssi/branding.html" --> </div> <!--#include virtual="/ssi/mobile-controls.html" --> <div class="navigation-search"> <div id="head-search" class="search-container"> <!--#include virtual="/ssi/search.html" --> </div> <!--#include virtual="/sample/modules/nav-full-width.html" --> </div> </header>
More Navigation Samples
