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. Add a design for the menu items in the header. This can be done in two ways:

add a <style> tag to the Site header block and place the code below in it.
insert the code in the Styles tab in the Customize CSS Styles section.

The second option is convenient because you will be able to keep all styles in one place and the Sections tab will not be overloaded with code. Also, in this option, you do NOT need to add a <style> tag.

The code for the design:

<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 when both the main code and the design code are included:

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. Add a design for the menu items in the footer. This can be done in two ways:

add a <style> tag to the Site footer block and place the code below in it.
insert the code in the Styles tab in the Customize CSS Styles section.

The code for the design:

<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 when both the main code and the design code are included:

6. Click Save and Update to save the changes.