Je hebt helemaal gelijk, Rubensky.
[CODE lang="css" title="CSS"]/* Menu theme-title */
.menu-theme-title {margin: 0 auto; width: 100%;}
/* Menu-navigation */
/* Switch button menu */
.button-menu {cursor: pointer; height: 25px; margin-top: 10px; position: relative; width: 25px; z-index: 9000; -webkit-transition: opacity .25s ease; transition: opacity .25s ease;}
.button-menu:hover {opacity: 1;}
/* Hamburger */
.button-menu span {background: #c6c6c6; border: none; cursor: pointer; height: 4px; left: 0; position: absolute; width: 100%; -webkit-transition: all .35s ease; transition: all .35s ease;}
/* Hamburger lijnen */
.button-menu span:nth-of-type(1) {top: 0px;}
.button-menu span:nth-of-type(2) {top: 11px;}
.button-menu span:nth-of-type(3) {top: 22px;}
/* Switch van hamburger/kruisje - per lijn */
.button-menu.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
-ms-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button-menu.active .middle {
opacity: 0;
background: #FFF;
}
.button-menu.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
/* Overlay (niet zichtbaar) */
.overlay {background-color: rgba(17, 58, 89, 0.9); height: 0%; left: 0; opacity: 0; overflow: hidden; position: fixed; top: 0; visibility: hidden; width: 100%;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
/* Overlay (zichtbaar) */
.overlay.open {height: 100%; opacity: 1; visibility: visible; z-index: 8000;} /* Z-index moet lager zijn dan die van de .button-menu */
/* overlay menu-items effect bij openen */
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay nav {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
/* Top: lijnt menu al verticaal in het midden uit */
/* Menu-navigation */
.main-navigation ul {list-style: none; margin: 0 auto; padding: 0; width: 85%;}
.main-navigation ul li {font-size: 2rem; padding: 1em; text-align: center; width: calc(100%-2em); }
.main-navigation ul li a {color: #ffffff;}
.main-navigation ul li:hover{background-color: rgba(0, 0, 0, 0.1);} /* Zwart met opacity */
[/CODE]
[CODE lang="html" title="HMTL"] <div class="menu-navigation">
<!-- Switch button hamburger/kruis -->
<div class="button-menu" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div><!-- /.button-menu -->
<div class="overlay" id="overlay">
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
</div><!-- /.overlay -->
</div><!-- /.menu-navigation --> [/CODE]