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:

1. Open White Label settings in your Travelpatyouts account by launching Aviasales or Hotellook Tools tab.

2. Open the Sections tab.

3. 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>

4. Specify the link to the desired site and the link text in the href parameter by replacing "Link 1" with the correct link. You can delete not needed links or insert more.

5. 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

1. Open White Label settings in your Travelpatyouts account by launching Aviasales or Hotellook Tools tab.

2. Open the Sections tab.

3. Add the following code to the Site footer block:

<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>

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

5. To add design to the menu items in the footer, 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.