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 like in the picture above:

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

2. Open the Sections tab.

3. Add the following code to the Site header block at the top:

 <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 in the href parameter by replacing # with the correct link. Replace "Link 1" with your link text. You can delete unnecessary links or insert more, for example:

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

<style> 
/* 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 */
</style>

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

The Site header block should look like this:
ezgif-4-be11684768.gif

6. Click Save and Update to save the changes.

How to add a menu to the footer

1. Open White Label settings in your Travelpayouts account by launching the 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:

<style> 
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;
}
}
</style>

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

The Site footer block should look like this:
ezgif-4-68f8e9a00a.gif

6. Click Save and Update to save the changes.