Docs - Headers
Header elements
You can use elements below in header rows:
- 1 row strings including links and icons
- Logos
- Social links of different types
- Social links
- Inline forms
- Buttons
- Menus
Feel free to chose 1 header from our headers page or create your own version. Our prepared header version doesn't contains mobile menus, we will add them there soon. You need to create mobile menus by yourself using default header as an example by far.
Header Structure
.pi-header block is main header wrapper, that include each header row
<div class="pi-header"> <!-- header rows go here --> </div>
Each header row is what is called "section", you can read about sections on Docs sections description page. So in two words, section need to have wrapper with ".pi-section-w", header section wrapper need another class ".pi-section-header-w", section wrapper need to have another class that choose color scheme for section ".pi-section-dark" and one that choose size ".pi-row-sm-w". Eventually, section goes inside a wrapper, "pi-section pi-row-sm", color scheme class omitted here as we don't need that.
Code Example below shows header with two header rows small + large
<div class="pi-header"> <div class="pi-section-w pi-section-dark"> <div class="pi-section pi-row-sm"> <!-- header row content go here --> </div> </div> <div class="pi-section-w pi-section-dark"> <div class="pi-section pi-row-lg"> <!-- header row content go here --> </div> </div> </div>
Let's add some elements into our rows.
Each header element needs to be wrapped with "pi-row-block" wrapper. Header logo wrapper have to have another class "pi-row-block-logo". Text blocks need wrapper need to have "pi-row-block-txt" class.
If you need right aligned header block, add "pi-pull-right" class. You will need revert right elements HTML div blocks, to make them be rendered in right order.
As we do responsive we need to add some more classes to our "pi-row-block" elements, to make them hidden or visible in some breakpoints. (see Visibility control classes.)
<div class="pi-header"> <div class="pi-section-w pi-section-dark"> <div class="pi-section pi-row-sm"> <!-- Phone --> <div class="pi-row-block pi-row-block-txt"> <i class="pi-row-block-icon icon-phone pi-icon-base pi-icon-square"></i>Call Us: <strong>+7.906.229.2627</strong> </div> <!-- End phone --> <!-- Social icons --> <div class="pi-row-block pi-pull-right pi-hidden-2xs"> <ul class="pi-social-icons pi-stacked pi-jump pi-full-height pi-bordered pi-small pi-colored-bg clearFix"> <li><a href="#" class="pi-social-icon-twitter"><i class="icon-twitter"></i></a></li> <li><a href="#" class="pi-social-icon-facebook"><i class="icon-facebook"></i></a></li> </ul> </div> <!-- End social icons --> <!-- Text --> <div class="pi-row-block pi-row-block-txt pi-pull-right pi-hidden-xs">Follow Us:</div> <!-- End text --> </div> </div> <div class="pi-section-w pi-section-dark"> <div class="pi-section pi-row-lg"> <!-- Logo --> <div class="pi-row-block pi-row-block-logo"> <a href="/index.html"><img src="img/logo-base.png" alt=""></a> </div> <!-- End logo --> <!-- Menu --> <div class="pi-row-block pi-pull-right"> <ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm"> <!-- Home --> <li class="active"> <a href="#"><span>Home</span></a> </li> <!-- End home --> <!-- Company --> <li class="pi-has-dropdown"> <a href="#"><span>Company</span></a> <ul class="pi-submenu pi-has-border pi-items-have-borders pi-has-shadow pi-submenu-dark"> <li><a href="#">About us</a></li> <li><a href="#">Meet the team</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Clients</a></li> <li><a href="#">We are hiring</a></li> </ul> </li> <!-- End company --> <!-- Company --> <li class="pi-has-dropdown"> <a href="#"><span>Services</span></a> <ul class="pi-submenu pi-has-border pi-items-have-borders pi-has-shadow pi-submenu-dark"> <li><a href="#"><i class="icon-lamp"></i>Strategy solutions</a></li> <li><a href="#"><i class="icon-monitor"></i>Digital design</a></li> <li><a href="#"><i class="icon-cog"></i>Web development</a></li> <li><a href="#"><i class="icon-link"></i>Social marketing</a></li> <li><a href="#"><i class="icon-feather"></i>Copywriting</a></li> </ul> </li> <!-- End company --> <!-- Work --> <li> <a href="#"><span>Work</span></a> </li> <!-- End work --> <!-- Blog --> <li> <a href="#"><span>Blog</span></a> </li> <!-- End blog --> </ul> </div> <!-- End menu --> </div> </div> </div>
Sticky headers
Wrap rows that needs to be always on top into block with class "pi-header-sticky"
<div class="pi-header"> <div class="pi-section-w pi-section-dark"> <div class="pi-section pi-row-sm"> <!-- This row is ouside of "pi-header-sticky" so it will be hidden after scroll --> </div> </div> <div class="pi-header-sticky"> <div class="pi-section-w pi-section-dark"> <div class="pi-section pi-row-lg"> <!-- This row is inside "pi-header-sticky" so it will be fixed on top --> </div> </div> </div> </div>
Reducible large row
Your large rows that are inside sticky header could be reduced after user scrolls them a bit. Just add "pi-row-reducible" class to large header section wrapper.
<div class="pi-header"> <div class="pi-section-w pi-section-dark"> <div class="pi-section pi-row-sm"> <!-- This row is ouside of "pi-header-sticky" so it will be hidden after scroll --> </div> </div> <div class="pi-header-sticky"> <div class="pi-section-w pi-section-dark pi-row-reducible"> <div class="pi-section pi-row-lg"> <!-- This row is inside "pi-header-sticky" so it will be fixed on top --> </div> </div> </div> </div>
