Header
Below are various configurations of the header. Choose the configuration that best suits your website or application.
Header with visual identifier
Code
<!-- Header with visual identifier -->
<div class="cui coc-header">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
</div>
Header with visual identifier and search
Code
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>
<div class="cui coc-header">
<a class="coc-logo" href="#" id="coc-logo">
<img src="/img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="/img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<!-- Mobile Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field-1" class="hidden">Search</label>
<input id="search-field-1" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile Search Part 2. Fake search box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
<div class="search-box-input"></div>
<div class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</div>
</a>
<!-- Mobile Search Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search" class="cui modal-window modal-window-search">
<div class="modal-window-header">
<a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
</div>
<div class="modal-window-body">
<div class="cui search-box">
<label for="search-field-modal-1" class="hidden">Search</label>
<input id="search-field-modal-1" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div><!-- End of .coc-header -->
Header with visual identifier, search, and global navigation menu
Code
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>
<script src="COC.Nav.js"></script>
<script>
$( '#navId' ).ready(function() {
COC.Nav.Init();
});
</script>
<div class="cui coc-header coc-header-nav-search">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<!-- Mobile Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field-2" class="hidden">Search</label>
<input id="search-field-2" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile Search Part 2. Fake search box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search-2" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
<div class="search-box-input"></div>
<div class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</div>
</a>
<!-- Mobile Search Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search-2" class="cui modal-window modal-window-search">
<div class="modal-window-header">
<a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
</div>
<div class="modal-window-body">
<div class="cui search-box">
<label for="search-field-modal-2" class="hidden">Search</label>
<input id="search-field-modal-2" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
<-- Global navigation menu -->
<nav id="navId" class="cui coc-secondary-9L-nav globalNav">
<ul class="nav-menu">
<button type="button" id="exploreBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu expanded">Explore<span class="cicon-bars"></span></button>
<button type="button" id="closeBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu collapsed">Close<span class="cicon-times"></span></button>
<li class="nav-item">
... Truncated for brevity
</li>
</ul>
</nav>
</div><!-- End of .coc-header -->
Header with visual identifier and global navigation menu
Code
<script src="jquery-2.2.4.min.js"></script>
<script src="COC.Nav.js"></script>
<script>
$( '#navId' ).ready(function() {
COC.Nav.Init();
});
</script>
<div class="cui coc-header coc-header-withNavOnly">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<ul id="skiplinks">
<li><a href="#content" accesskey="S">Skip to main content</a></li>
</ul>
<-- Global navigation menu -->
<nav id="navId" class="cui coc-secondary-9L-nav globalNav">
<ul class="nav-menu">
<button type="button" id="exploreBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu expanded">Explore<span class="cicon-bars"></span></button>
<button type="button" id="closeBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu collapsed">Close<span class="cicon-times"></span></button>
<li class="nav-item">
... Truncated for brevity
</li>
</ul>
</nav>
</div><!-- End of .coc-header -->
Header with visual identifier, global navigation menu, and search on small screens only
Code
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>
<script src="COC.Nav.js"></script>
<script>
$( '#navId' ).ready(function() {
COC.Nav.Init();
});
</script>
<div class="cui coc-header coc-header-withNavOnly coc-header-searchMobileOnly">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<!-- Mobile Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field-4" class="hidden">Search</label>
<input id="search-field-4" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile Search Part 2. Fake search box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search-4" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
<div class="search-box-input"></div>
<div class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</div>
</a>
<!-- Mobile Search Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search-4" class="cui modal-window modal-window-search">
<div class="modal-window-header">
<a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
</div>
<div class="modal-window-body">
<div class="cui search-box">
<label for="search-field-modal-4" class="hidden">Search</label>
<input id="search-field-modal-4" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
<-- Global navigation menu -->
<nav id="navId" class="cui coc-secondary-9L-nav globalNav">
<ul class="nav-menu">
<button type="button" id="exploreBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu expanded">Explore<span class="cicon-bars"></span></button>
<button type="button" id="closeBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu collapsed">Close<span class="cicon-times"></span></button>
<li class="nav-item">
... Truncated for brevity
</li>
</ul>
</nav>
</div><!-- End of .header -->