How to add a menu to the White Label header and footer

Once you’ve created and configured the White Label from Travelpayouts, you can add links to other pages of your site (or to advertisers' sites) in its header and footer.

Please note! If you have multiple languages selected, the code must be added for each language.

How to add a menu to the header

To add links to the White Label header, open its settings and go to the Sections tab, add the following code to the Site header block:

 <header itemscope="" itemtype="http://schema.org/WPHeader" role="banner">
 <div class="header__inner">
 <nav>
 <ul class="header__menu">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>
 </nav>
 </div>
 </header>

Specify the link to the desired site and the link text in the href parameter.

To add design to the menu items in the header, add a <style> tag and place the following code inside the tag:

 /* START styles for header */
 header .header__inner {
 width: 960px;
 margin: 15px auto;
 }
 header ul.header__menu{
 margin: 0;
 padding: 0;
 }
 header .header__menu li{
 list-style: none;
 display: inline-block;
 margin-right: 30px;
 }
 header .header__menu li a{
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 color: #00AFDD;
 }
 header .header__menu li a:hover{
 opacity: 0.8;
 }
 @media (max-width: 960px) {
 header .header__inner {
 width: 100%;
 margin: 15px;
 }
 }
 /* END styles for header */

You can change the style as you like. If you lack knowledge of CSS, find a freelance developer who can help you.

How to add a menu to the footer

To add a menu to the footer, place the following code in the code block Site footer:

<footer>
 <div class="footer__inner">
 <nav>
 <ul class="footer__menu">
 <li><a href="#">Link footer 1</a></li>
 <li><a href="#">Link footer 2</a></li>
 <li><a href="#">Link footer 3</a></li>
 </ul>
 </nav>
 </div>
</footer>

Specify the link to the desired site and the link text in the href parameter.

To add design to the menu items in the footer, and add a <style> tag and place the following code inside the tag:

footer .footer__inner {
 width: 950px;
 margin: 15px auto;
 }
 footer ul.footer__menu{
 margin: 0;
 padding: 0;
 }
 footer .footer__menu li{
 list-style: none;
 display: inline-block;
 margin-right: 30px;
 }
 footer .footer__menu li a{
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 color: #00AFDD;
 }
 footer .footer__menu li a:hover{
 opacity: 0.8;
 }
 @media (max-width: 960px) {
 footer .footer__inner {
 width: 100%;
 margin: 15px;
 }
 }

You can change the style as you like. If you lack knowledge of CSS, find a freelance developer who can help you.