The UA Templates ships with several different header combinations. In general, you will be using one of three modifiers: header-light, header-primary, and header-dark.
Below, you will find the various combinations which compliment each other. Our recommendations are to use either header-light or header-primary in the top nav bar and either header-primary or header-light in the main nav bar. If you would like to use the header-dark option, in either configuration, please use header-light as the opposite color.
<header>
<div class="header-top header-light hidden-xs hidden-sm">
...
</div> <!-- .header-top -->
<div class="sticky-header-container">
<div class="header-main header-primary navbar mega-menu" data-spy="affix" data-offset-top="50">
...
</div> <!-- .header-main -->
</div> <!-- .sticky-header-container -->
</header>
<header>
<div class="header-top header-primary hidden-xs hidden-sm">
...
</div> <!-- .header-top -->
<div class="sticky-header-container">
<div class="header-main header-light navbar mega-menu" data-spy="affix" data-offset-top="50">
...
</div> <!-- .header-main -->
</div> <!-- .sticky-header-container -->
</header>
<header>
<div class="header-top header-dark hidden-xs hidden-sm">
...
</div> <!-- .header-top -->
<div class="sticky-header-container">
<div class="header-main header-light navbar mega-menu" data-spy="affix" data-offset-top="50">
...
</div> <!-- .header-main -->
</div> <!-- .sticky-header-container -->
</header>
<header>
<div class="header-top header-light hidden-xs hidden-sm">
...
</div> <!-- .header-top -->
<div class="sticky-header-container">
<div class="header-main header-dark navbar mega-menu" data-spy="affix" data-offset-top="50">
...
</div> <!-- .header-main -->
</div> <!-- .sticky-header-container -->
</header>