Full Width Navigation (with no 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.
If you don't want to use icons on top of menu items simply add class .no-icons to the nav tag.
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 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="/v6.5/ssi/settings-bar.html" --> <!--#include virtual="/v6.5/ssi/branding-full-width.html" --> <!--#include virtual="/v6.5/ssi/mobile-controls.html" --> <div class="navigation-search"> <!--#include virtual="/v6.5/ssi/navigation.html" --> <div id="head-search" class="search-container"> <!--#include virtual="/v6.5/ssi/search.html" --> </div> </div> <div class="header-decoration"></div> </header>
More Navigation Samples
