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

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

Please note that 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, go to the Header tab in the White Label settings and add the following code:

 <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, open the Color Scheme tab and add the following code before the closing </style> 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, open the Footer tab and enter the following code there: Specify the link to the desired site and the link text in the href parameter.

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

To add design to the menu items in the header, open the Color Scheme tab and add the following code before the closing </style> 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.

Was this article helpful?

Have more questions? Submit a request