Menu mobile bug css

Bonjour,

Je suis entrain de finaliser un site sur Wordpress. J'ai créé un thème sur mesure en php. J'ai bug côté CSS.

J'ai créé un menu rien de plus basique ok. En version statique avant de le mettre sur wp le menu côté mobile fonctionne bien. Mais dès que je l'ai mis sur wp le menu ne fonctionne plus mais l'animation est présent. C'est à dire lorsque je clique sur le menu burger le background du menu descend bien vers le bas mais les titres des pages ne s'affiche pas.

Quelqu'un pour m'aider ?

Voici mon code:

HTML

	<header>
		<nav>
			<div class="navigation">
	          	<a href=""><img src="assets/images/Logo.png"></a>
	        	<input type="checkbox" id="menu-checkbox" class="menu-checkbox">
				<label for="menu-checkbox" class="menu-toggle">
					<span></span>
					<span></span>
					<span></span>
				</label>
	        	<ul class="menu">
	        		<li><a href="">Accueil</a></li>
	        		<li><a href="">Studio</a></li>
	        		<li><a href="">Services</a></li>
	        		<li><a href="">Contact</a></li>
	        	</ul>
	        </div>
		</nav>
	</header>

CSS

  header{
    nav{
      .navigation{
        display: block;
          .menu-checkbox {
            opacity: 0;
            position: absolute;
            top: -1000px;
              &:checked ~ .menu {
                display: block;
                margin: 1em 0;
                max-height: none;
                padding: 0;
              }
              &:checked + .menu {
                margin: 1em 0;
                max-height: 1000px;
                opacity: 1;
              }
          }
          .menu-toggle{
            display: block;
            padding: .5em 1em;
            float: right;
          }
          label{
            position: relative;
            top: 27px;
            height: 20px;
            width: 15px; 
            span {
              position: absolute;
              width: 33px;
              height: 2px;
              top: 47%;
              margin-top: -1px;
              left: 0;
              display: block;
              background: black;
              transition: .3s;
            }
            span:first-child {
              top: 3px; 
            }
            span:last-child {
              top: 16px; 
            }      
          }
          label:hover {
            cursor: pointer;
          }
          input:checked + label { 
            span {
              opacity: 0;
              top: 50%;
            }
            span:first-child {
              opacity: 1;
              transform: rotate(45deg);
            }
            span:last-child {
              opacity: 1;
              transform: rotate(-45deg);
            }
          }
          .menu{
            flex-basis: 100%;
            list-style: none;
            margin: 0;
            max-height: 0;
            overflow: hidden;
            padding: 0 2em;
            text-transform: uppercase;
            transition: margin .5s ease-in-out, 
            max-height .5s ease-in-out, opacity .3s .1s ease-in-out;
              li{
                display: block;
                border-bottom: 1px solid $border-menu;
                  a{
                    display: inline-block;
                    padding: 0.5em 1em;
                  }
              }
          }
      }
    }
  }

Modifié par tc-web (23 Jul 2020 - 16:28)

Bonjour,

Il faudrait qu'on puisse voir une page où le bug est visible. Parce que là, c'est difficile de voir ce qui pourrait ne pas aller !

Amicalement,