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

This setting is only available for White Labels with the "Page" type. If you’re using “Widget” type, you can’t apply this setting.

Learn more about the difference between White Label Web types here.

Once you’ve created and configured the White Label Web in your Travelpayouts account, you can add links to other pages of your site (or to advertisers' sites) in its header and footer. For example, it can look like this:

Note! If you have multiple languages on your White Label, make sure to add links to all of them using the instructions below.

How to add a menu to the header

1. Open White Label Web settings in your Travelpayouts account.

2. Open the Custom HTML code tab.

3. Add the following code in the <head> tag:

<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 needed URL.
Replace "Link 1" with your link text. You can delete unnecessary links or insert more, for example:

5. To style the menu items in the header, add the code below between the <style> tags.

The code:

/* START styles for header */
.header__inner {
 width: 960px;
 margin: 15px auto;
 }
ul.header__menu{
 margin: 0;
 padding: 0;
 }
 .header__menu li{
 list-style: none;
 display: inline-block;
 margin-right: 30px;
 }
.header__menu li a{
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 color: #00AFDD;
 }
.header__menu li a:hover{
 opacity: 0.8;
 }
 @media (max-width: 960px) {
 .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.
6. Click Save and continue to save the changes.

How to add a menu to the footer

1. Open White Label Web settings in your Travelpayouts account.

2. Open the Custom HTML code tab.

3. Add the following code in the <footer> tag:

 <div class="footer__inner">
 <nav>
 <ul class="footer__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>

4. Specify the link to the desired site in the href parameter by replacing # with the needed URL.
Replace "Link 1" with your link text. You can delete unnecessary links or insert more.

5. To style the menu items in the header, add the code below between the <style> tags.

The code:

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

6. Click Save and continue to save the changes.

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

Example: