<style> 
 
.modelc .burger-menu { 
  --burger-menu-radius: 4em; 
  position: fixed; 
  z-index: 101; 
  display: block; 
  width: var(--burger-menu-radius); 
  height: var(--burger-menu-radius); 
  background: white; 
  border: solid 2px rgba(149, 166, 167, 0.4); 
  border-radius: 50%; 
  outline: none; 
  cursor: pointer; 
  transition: 0.5s ease-in-out; 
  top: 10px; 
} 
 
.modelc .burger-menu .line { 
  position: absolute; 
  left: 25%; 
  width: 50%; 
  height: 3px; 
  background: rgba(43, 61, 79, 0.3); 
  border-radius: 10px; 
  overflow: hidden; 
  transition: all 0.5s ease; 
} 
 
.modelc .navbar-burger span:nth-child(1) { 
    top: calc(50% - 16px); 
} 
 
.modelc .navbar-burger span:nth-child(2) { 
    top: 50%; 
} 
 
.modelc .navbar-burger span:nth-child(3) { 
    top: calc(50% + 15px); 
} 
 
.modelc .navbar-burger.is-active span:nth-child(1) { 
    -webkit-transform: translateY(5px) rotate(45deg); 
    transform: translateY(15px) rotate(45deg); 
    opacity: 1; 
} 
 
.modelc .navbar-burger.is-active span:nth-child(3) { 
    -webkit-transform: translateY(-5px) rotate(-45deg); 
    transform: translateY(-15px) rotate(-45deg); 
} 
 
.modelc .burger-menu .line::after { 
  position: absolute; 
  content: ""; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: black; 
  transform: translateX(-100%); 
  transition: all 0.25s ease; 
} 
.modelc .burger-menu .line:nth-child(2)::after { 
  transition-delay: 0.1s; 
} 
.modelc .burger-menu .line:nth-child(3)::after { 
  transition-delay: 0.2s; 
} 
.modelc .burger-menu:hover { 
  box-shadow: 0.4px 0.4px 0.8px rgba(0, 0, 0, 0.042), 1px 1px 2px rgba(0, 0, 0, 0.061), 1.9px 1.9px 3.8px rgba(0, 0, 0, 0.075), 3.4px 3.4px 6.7px rgba(0, 0, 0, 0.089), 6.3px 6.3px 12.5px rgba(0, 0, 0, 0.108), 15px 15px 30px rgba(0, 0, 0, 0.15); 
} 
.modelc .burger-menu:hover .line::after { 
  transform: translateX(0); 
} 
 
</style> 
 
 
 
 
<!-- navigation burger --> 
<div class="navigationBurger modelc"> 
  <a role="button" class="navbar-burger burger-menu" aria-label="menu" aria-expanded="false" data-target="menuBurgerDesktop"> 
    <span aria-hidden="true" class="line"></span> 
    <span aria-hidden="true" class="line"></span> 
    <span aria-hidden="true" class="line"></span> 
  </a> 
  <nav class="navbar" aria-label="main navigation"> 
    <div id="menuBurgerDesktop" class="navbar-menu"> 
      <div class="navbar-start"> 
        <?php wp_nav_menu(array( 
          'theme-location' => 'header-menu', //change it according to your register_nav_menus() function 
          'depth' => 2, 
          'container' => 'navbar-end', 
          'items_wrap' => '%3$s', 
          'walker' => new Bulma_Walker(), 
        )); 
        ?> 
      </div> 
      <div class="navbar-end"> 
        <div class="navbar-item"> 
          <div class="field is-grouped"> 
            <form role="search" method="get" class="control is-expanded has-icons-left search-form" action="<?php echo home_url( '/' ); ?>"> 
              <input type="search" class="input stylsearch" placeholder="" value="" name="s" title="Rechercher :" /> 
              <span class="icon is-small is-left"> 
                <i class="fas fa-search"></i> 
              </span> 
            </form> 
          </div> 
        </div> 
      </div> 
    </div> 
  </nav> 
</div> 
<!-- / navigation burger -->