Header
Mamo comes with 6 header layout options. Below are each layout with preview, code and demo links.
Layout 1#
You can find a demo for this header in portfolio-slideshow.html for your reference. Below are the entire code of this header.
<header class="pth-header pth-header--layout-1 pth-header--popup-layout-1">
<!-- Logo start -->
<h1 class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
<span class="screen-reader-text">Site Name</span>
</a>
</h1>
<!-- Logo end -->
<!-- Buttons start -->
<div class="pth-magnet-btn pth-magnet-btn--menu">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--menu" data-magnet>
<svg class="pth-menu-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="1.97" y1="19.19" x2="27.97" y2="19.19"/>
<line x1="1.97" y1="11.19" x2="27.97" y2="11.19"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--cart">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--cart" data-magnet>
<svg class="pth-cart-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<path d="M11.07,13.89v-6c0-2.21,1.79-4,4-4s4,1.79,4,4v6"/>
<polyline points="22.03,9.89 23.07,9.89 24.07,25.89 6.07,25.89 7.07,9.89 11.07,9.89"/>
<line x1="14.03" y1="9.89" x2="19.07" y2="9.89"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--social">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--social" data-magnet>
<svg class="pth-social-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<circle cx="21.93" cy="23" r="3"/>
<circle cx="21.93" cy="7" r="3"/>
<circle cx="8.07" cy="15" r="3"/>
<line x1="21.93" y1="10" x2="21.93" y2="17"/>
<line x1="19.33" y1="21.5" x2="13.26" y2="18"/>
<line x1="16.74" y1="10" x2="10.66" y2="13.5"/>
</svg>
</div>
</div>
<!-- Buttons end -->
<!-- Links start -->
<div class="pth-header__link-wrap pth-header__link-wrap--login">
<a href="#" class="pth-header__link">Login</a>
</div>
<div class="pth-header__link-wrap pth-header__link-wrap--lang">
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
</div>
<!-- Links end -->
<!-- Popup menu start -->
<div class="pth-header__popup pth-header__popup--menu">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner pth-vscroll-window">
<div class="pth-vscroll-element">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener pth-popup-switcher" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<nav class="pth-header__popup-nav">
<ul>
<li class="pth-menu-item pth-current">
<a href="#">Link 1</a>
</li>
<li class="pth-menu-item pth-menu-item--has-children">
<a href="#">Link 2</a>
<ul class="pth-sub-menu">
<li class="pth-menu-item"><a href="#">Sub link 1</a></li>
<li class="pth-menu-item"><a href="#">Sub link 2</a></li>
<li class="pth-menu-item"><a href="#">Sub link 3</a></li>
</ul>
</li>
</ul>
</nav>
<div class="pth-header__popup-foot">
<div class="pth-header__popup-foot-inner">
<ul class="pth-header__popup-social">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Dribbble</a></li>
</ul>
<a href="#" class="pth-header__link">Login</a>
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Popup menu end -->
<!-- Popup search start -->
<div class="pth-header__popup pth-header__popup--search">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<div class="pth-header__popup-search">
<form>
<label>
<input type="search" name="search" placeholder="Search" value=""/>
<span>Type and hit enter to search</span>
</label>
</form>
</div>
</div>
</div>
<!-- Popup search end -->
<svg class="pth-popup-overlay pth-overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z" />
</svg>
</header>Layout 2#
You can find a demo for this header in post-1.html for your reference. This header layout has almost the same code as Layout 1 the only thing that that you need to change in the modifier classes of the <header> tag.
Change this ...
<header class="pth-header pth-header--layout-1 pth-header--popup-layout-1">
...
</header>To this ...
<header class="pth-header pth-header--layout-2 pth-header--popup-layout-2">
...
</header>Layout 3#
You can find a demo for this header in contact-2.html for your reference. Below are the entire code of this header.
<header class="pth-header pth-header--layout-3 pth-header--popup-layout-3">
<!-- Logo start -->
<h1 class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
<span class="screen-reader-text">Site Name</span>
</a>
</h1>
<!-- Logo end -->
<!-- Buttons start -->
<div class="pth-magnet-btn pth-magnet-btn--menu">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--menu" data-magnet>
<svg class="pth-menu-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="1.97" y1="19.19" x2="27.97" y2="19.19"/>
<line x1="1.97" y1="11.19" x2="27.97" y2="11.19"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--cart">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--cart" data-magnet>
<svg class="pth-cart-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<path d="M11.07,13.89v-6c0-2.21,1.79-4,4-4s4,1.79,4,4v6"/>
<polyline points="22.03,9.89 23.07,9.89 24.07,25.89 6.07,25.89 7.07,9.89 11.07,9.89"/>
<line x1="14.03" y1="9.89" x2="19.07" y2="9.89"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--social">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--social" data-magnet>
<svg class="pth-social-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<circle cx="21.93" cy="23" r="3"/>
<circle cx="21.93" cy="7" r="3"/>
<circle cx="8.07" cy="15" r="3"/>
<line x1="21.93" y1="10" x2="21.93" y2="17"/>
<line x1="19.33" y1="21.5" x2="13.26" y2="18"/>
<line x1="16.74" y1="10" x2="10.66" y2="13.5"/>
</svg>
</div>
</div>
<!-- Buttons end -->
<!-- Links start -->
<div class="pth-header__link-wrap">
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
<a href="#" class="pth-header__link">Login</a>
</div>
<!-- Links end -->
<!-- Popup menu start -->
<div class="pth-header__popup pth-header__popup--menu">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner pth-vscroll-window">
<div class="pth-vscroll-element">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener pth-popup-switcher" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<nav class="pth-header__popup-nav">
<ul>
<li class="pth-menu-item pth-current">
<a href="#">Link 1</a>
</li>
<li class="pth-menu-item pth-menu-item--has-children">
<a href="#">Link 2</a>
<ul class="pth-sub-menu">
<li class="pth-menu-item"><a href="#">Sub link 1</a></li>
<li class="pth-menu-item"><a href="#">Sub link 2</a></li>
<li class="pth-menu-item"><a href="#">Sub link 3</a></li>
</ul>
</li>
</ul>
</nav>
<div class="pth-header__popup-foot">
<div class="pth-header__popup-foot-inner">
<ul class="pth-header__popup-social">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Dribbble</a></li>
</ul>
<a href="#" class="pth-header__link">Login</a>
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Popup menu end -->
<!-- Popup search start -->
<div class="pth-header__popup pth-header__popup--search">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<div class="pth-header__popup-search">
<form>
<label>
<input type="search" name="search" placeholder="Search" value=""/>
<span>Type and hit enter to search</span>
</label>
</form>
</div>
</div>
</div>
<!-- Popup search end -->
<svg class="pth-popup-overlay pth-overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z" />
</svg>
</header>Layout 4#
You can find a demo for this header in about-2.html for your reference. Below are the entire code of this header.
<header class="pth-header pth-header--layout-4 pth-header--popup-layout-1">
<!-- Logo start -->
<h1 class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
<span class="screen-reader-text">Site Name</span>
</a>
</h1>
<!-- Logo end -->
<!-- Navigation start -->
<nav class="pth-header__nav">
<ul>
<li class="pth-menu-item pth-current">
<a href="#">Link 1</a>
</li>
<li class="pth-menu-item pth-menu-item--has-children">
<a href="#">Link 2</a>
<ul class="pth-sub-menu">
<li class="pth-menu-item"><a href="#">Sub link 1</a></li>
<li class="pth-menu-item"><a href="#">Sub link 2</a></li>
<li class="pth-menu-item"><a href="#">Sub link 3</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Navigation end -->
<!-- Buttons start -->
<div class="pth-magnet-btn pth-magnet-btn--menu">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--menu" data-magnet>
<svg class="pth-menu-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="1.97" y1="19.19" x2="27.97" y2="19.19"/>
<line x1="1.97" y1="11.19" x2="27.97" y2="11.19"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--cart">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--cart" data-magnet>
<svg class="pth-cart-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<path d="M11.07,13.89v-6c0-2.21,1.79-4,4-4s4,1.79,4,4v6"/>
<polyline points="22.03,9.89 23.07,9.89 24.07,25.89 6.07,25.89 7.07,9.89 11.07,9.89"/>
<line x1="14.03" y1="9.89" x2="19.07" y2="9.89"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--social">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--social" data-magnet>
<svg class="pth-social-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<circle cx="21.93" cy="23" r="3"/>
<circle cx="21.93" cy="7" r="3"/>
<circle cx="8.07" cy="15" r="3"/>
<line x1="21.93" y1="10" x2="21.93" y2="17"/>
<line x1="19.33" y1="21.5" x2="13.26" y2="18"/>
<line x1="16.74" y1="10" x2="10.66" y2="13.5"/>
</svg>
</div>
</div>
<!-- Buttons end -->
<!-- Links start -->
<div class="pth-header__link-wrap">
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
<a href="#" class="pth-header__link">Login</a>
</div>
<!-- Links end -->
<!-- Popup menu start -->
<div class="pth-header__popup pth-header__popup--menu">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner pth-vscroll-window">
<div class="pth-vscroll-element">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener pth-popup-switcher" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<nav class="pth-header__popup-nav">
<ul>
<li class="pth-menu-item pth-current">
<a href="#">Link 1</a>
</li>
<li class="pth-menu-item pth-menu-item--has-children">
<a href="#">Link 2</a>
<ul class="pth-sub-menu">
<li class="pth-menu-item"><a href="#">Sub link 1</a></li>
<li class="pth-menu-item"><a href="#">Sub link 2</a></li>
<li class="pth-menu-item"><a href="#">Sub link 3</a></li>
</ul>
</li>
</ul>
</nav>
<div class="pth-header__popup-foot">
<div class="pth-header__popup-foot-inner">
<ul class="pth-header__popup-social">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Dribbble</a></li>
</ul>
<a href="#" class="pth-header__link">Login</a>
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Popup menu end -->
<!-- Popup search start -->
<div class="pth-header__popup pth-header__popup--search">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<div class="pth-header__popup-search">
<form>
<label>
<input type="search" name="search" placeholder="Search" value=""/>
<span>Type and hit enter to search</span>
</label>
</form>
</div>
</div>
</div>
<!-- Popup search end -->
<svg class="pth-popup-overlay pth-overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z" />
</svg>
</header>Layout 5#
You can find a demo for this header in contact-1.html for your reference. Below are the entire code of this header.
<header class="pth-header pth-header--layout-5 pth-header--popup-layout-2">
<!-- Logo start -->
<h1 class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
<span class="screen-reader-text">Site Name</span>
</a>
</h1>
<!-- Logo end -->
<!-- Navigation start -->
<nav class="pth-header__nav">
<ul>
<li class="pth-menu-item pth-current">
<a href="#">Link 1</a>
</li>
<li class="pth-menu-item pth-menu-item--has-children">
<a href="#">Link 2</a>
<ul class="pth-sub-menu">
<li class="pth-menu-item"><a href="#">Sub link 1</a></li>
<li class="pth-menu-item"><a href="#">Sub link 2</a></li>
<li class="pth-menu-item"><a href="#">Sub link 3</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Navigation end -->
<!-- Buttons start -->
<div class="pth-magnet-btn pth-magnet-btn--menu">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--menu" data-magnet>
<svg class="pth-menu-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="1.97" y1="19.19" x2="27.97" y2="19.19"/>
<line x1="1.97" y1="11.19" x2="27.97" y2="11.19"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--cart">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--cart" data-magnet>
<svg class="pth-cart-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<path d="M11.07,13.89v-6c0-2.21,1.79-4,4-4s4,1.79,4,4v6"/>
<polyline points="22.03,9.89 23.07,9.89 24.07,25.89 6.07,25.89 7.07,9.89 11.07,9.89"/>
<line x1="14.03" y1="9.89" x2="19.07" y2="9.89"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--social">
<div class="pth-magnet-btn__inner pth-side-panel-opener" data-target=".pth-side-panel--social" data-magnet>
<svg class="pth-social-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<circle cx="21.93" cy="23" r="3"/>
<circle cx="21.93" cy="7" r="3"/>
<circle cx="8.07" cy="15" r="3"/>
<line x1="21.93" y1="10" x2="21.93" y2="17"/>
<line x1="19.33" y1="21.5" x2="13.26" y2="18"/>
<line x1="16.74" y1="10" x2="10.66" y2="13.5"/>
</svg>
</div>
</div>
<!-- Buttons end -->
<!-- Links start -->
<div class="pth-header__link-wrap">
<a href="#" class="pth-header__link">Login</a>
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
</div>
<!-- Links end -->
<!-- Popup menu start -->
<div class="pth-header__popup pth-header__popup--menu">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner pth-vscroll-window">
<div class="pth-vscroll-element">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-magnet-btn pth-magnet-btn--search">
<div class="pth-magnet-btn__inner pth-popup-opener pth-popup-switcher" data-target=".pth-header__popup--search" data-magnet>
<svg class="pth-search-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="8.99" y1="20.97" x2="3.92" y2="26.04"/>
<circle cx="17.29" cy="12.67" r="8.63"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<nav class="pth-header__popup-nav">
<ul>
<li class="pth-menu-item pth-current">
<a href="#">Link 1</a>
</li>
<li class="pth-menu-item pth-menu-item--has-children">
<a href="#">Link 2</a>
<ul class="pth-sub-menu">
<li class="pth-menu-item"><a href="#">Sub link 1</a></li>
<li class="pth-menu-item"><a href="#">Sub link 2</a></li>
<li class="pth-menu-item"><a href="#">Sub link 3</a></li>
</ul>
</li>
</ul>
</nav>
<div class="pth-header__popup-foot">
<div class="pth-header__popup-foot-inner">
<ul class="pth-header__popup-social">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Dribbble</a></li>
</ul>
<a href="#" class="pth-header__link">Login</a>
<ul class="pth-lang-switcher">
<li class="pth-header__link pth-current">EN</li>
<li><a href="#" class="pth-header__link">FR</a></li>
<li><a href="#" class="pth-header__link">IT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Popup menu end -->
<!-- Popup search start -->
<div class="pth-header__popup pth-header__popup--search">
<div class="pth-header__popup-bg pth-header__popup-bg--sm"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-bg pth-header__popup-bg--lg"><img src="assets/images/bg.jpg" alt=""/></div>
<div class="pth-header__popup-inner">
<div class="pth-header__popup-head">
<div class="pth-header__popup-head-inner">
<div class="pth-magnet-btn pth-magnet-btn--close">
<div class="pth-magnet-btn__inner pth-popup-closer" data-magnet>
<svg class="pth-close-icon" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" stroke-width="2">
<line x1="23.49" y1="23.49" x2="17.13" y2="17.13"/>
<line x1="17.13" y1="12.87" x2="23.49" y2="6.51"/>
<polyline points="6.51,23.49 15,15 6.51,6.51"/>
</svg>
</div>
</div>
<div class="pth-header__logo">
<a href="#">
<img src="assets/images/logo.png" alt=""/>
</a>
</div>
</div>
</div>
<div class="pth-header__popup-search">
<form>
<label>
<input type="search" name="search" placeholder="Search" value=""/>
<span>Type and hit enter to search</span>
</label>
</form>
</div>
</div>
</div>
<!-- Popup search end -->
<svg class="pth-popup-overlay pth-overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z" />
</svg>
</header>Layout 6#
You can find a demo for this header in about-1.html for your reference. This header layout has almost the same code as Layout 5 the only thing that that you need to change in the modifier classes of the <header> tag.
Change this ...
<header class="pth-header pth-header--layout-5 pth-header--popup-layout-2">
...
</header>To this ...
<header class="pth-header pth-header--layout-6 pth-header--popup-layout-3">
...
</header>