If you want to use the dark version of the header simply use the .dark
class in the header tag like this: <header class="main-container header fixed dark">
<header class="main-container header fixed ">
<!-- Nav Bar with Logo Area -->
<div class="flex-grid navbar">
<!-- Mobile Menu -->
<input type="checkbox" id="mobileMenu" class="hide">
<label id="mobileMenuLabel" class="mobile-menu left-side" for="mobileMenu">
<i class="hamburger"></i>
<label class="full-screen" for="mobileMenu"></label>
</label>
<div class="col-2 col-12-md logo">
<a href="/">LOGO</a>
</div>
<nav class="col-7 col-12-md navbar-right" id="topMenuNav">
<div class="navbar-links">
<input type="radio" class="hide" name="navbar-menu" id="navbarDropHide" checked>
<a href="#" class="active">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<div class="has-drop-menu hover-menu">
<input type="radio" id="navbarDropLink1" class="drop-menu-input hide" name="navbar-menu">
<label for="navbarDropLink1" class="menu-label"></label>
Hover Menu <i class="arrow-down"></i>
<label class="full-screen" for="navbarDropHide"></label>
<ul class="drop-menu">
<li><a href="#">Sub Menu Link</a></li>
<li><a href="#">Sub Menu Link</a></li>
<li><a href="#">Sub Menu Link</a></li>
</ul>
</div>
</div>
</nav>
<!-- Second menu -->
<!-- Second Mobile Menu -->
<input type="checkbox" id="mobileMenu2" class="hide">
<label id="mobileMenuLabel2" class="mobile-menu right-side" for="mobileMenu2">
<i class="profile"></i>
<label class="full-screen" for="mobileMenu2"></label>
</label>
<nav class="col-3 col-12-md text-right" id="topMenuNav2">
<div class="navbar-links">
<a href="#">Right Link</a>
<!-- Click Drop Menu -->
<div class="has-drop-menu">
<input type="radio" id="navbarDropLink2" class="drop-menu-input hide" name="navbar-menu">
Right Click Menu <i class="arrow-down"></i>
<label for="navbarDropLink2" class="menu-label"></label>
<label class="full-screen" for="navbarDropHide"></label>
<ul class="drop-menu drop-menu-left">
<li><a href="#">Sub Menu Link</a></li>
<li><a href="#">Sub Menu Link</a></li>
<li class="sep"></li>
<li><a href="#">Sub Menu Link</a></li>
</ul>
</div>
</div>
</nav><!-- /Second menu -->
</div>
</header>
<div class="fixed-nav-space" id="top"></div>
Helpful Information About This Component
Can the logo area size be changed?
Yes, the header uses the PCH grid grid system. Just update the amount of columns each section to use up as long as the sum of all columns equals 12 or 10 if you are using the 10 column grid. Just make sure you check the space left for nav links. If space is an issue you should consider using the nav click or hover menus to save space.Don't want a fixed header?
No problem! Simply remove the class.fixed
from the header tag and delete this div tag at the bottom:
<div class="fixed-nav-space" id="top"></div>
Active Page link
The class.active
on the link or dropmenu willcontrol the design of the current link. Default design is an underline with your pages primary color.
What is id="top" used for?
Theid="top"
is put there by default for any links you may want to make for getting back to the top of the page if needed.
If you feel this conflicts with any thing you all ready have in your pages it can be pulled out.
How do I change the mobile menu icons?
All PCH icons will be using the<i>
tag which is also used across most other icon third party sites.
The mobile menu icons can be seen by resizing this window to 1024px or below or on any mobile device. The hamburger menu icon is contained in the
<i class="hamburger">
tag. You can change this out for any image or other icon you like.
Same goes for the right mobile menu icon wich is a profile icon by default <i class="profile">
.