Full Width Navigation with Icons
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 class .nav-full-width-icons to the
header tag. Also, this menu version uses branding-full-width-icons.html instead of utility-header.html server side include.
Note: Please note that there are no social icons links in the branding-full-width-icons.html
include just to make sure it looks right in the mobile view.
For the same reason, there are only two utility links (buttons) that are used along with ca.gov logo and organization branding image.
Full Width Navigation with icons can be single level navigation as well as megamenu. If for some reason you don't want to use icons on top of the main navigation links simply add class .no-icons to the nav tag.
Full width navigation with icons header example:
<header class="global-header fixed nav-full-width-icons"> <div id="skip-to-content"><a href="#main-content">Skip to Main Content</a></div> <!--#include virtual="/ssi/settings-bar.html" --> <!--#include virtual="/ssi/branding-full-width-icons.html" --> <!--#include virtual="/ssi/mobile-controls.html" --> <div class="navigation-search"> <!--#include virtual="/ssi/navigation.html" --> <div id="head-search" class="search-container"> <!--#include virtual="/ssi/search.html" --> </div> </div> <div class="header-decoration"></div> </header>
More Navigation Samples
