NavBarMobile.html

<section class="conteiner-navigation-mobil">

   <nav class="site-navigation-mobile">
     <button class="button-menu-navigation-mobile close">
       <svg xmlns="http://www.w3.org/2000/svg" style="
                   color: currentColor;
                   height: 30px;
                   width: 30px;" height="16" width="14" viewBox="0 0 448 512">
                   <path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"></path>
               </svg>
     </button>
   </nav>
   
   <article class="content-site-navigation-mobile">

• <img src="https://wiki.the-west.net/images/3/34/Dock_quests.png" alt="">Lista de Búsquedas
• Inventario
• <img src="https://es1.the-west.es/images/window/shop/icons/tabs/equip.png?1699352772" height="50px">Conjuntos
• Trabajos
• Oficios
• <img src="https://westes.innogamescdn.com/images/items/yield/rodeo_trophy.png?5" height="50px">Logros
• Duelos
• Batallas de Fuerte
• Ciudades
• <img src="https://es1.the-west.es/images/window/shop/icons/tabs/veteran.png?1699352772" width="50px">Aventuras
• <img src="https://westde.innogamescdn.com/images/items/yield/fireworks_low.png?5" alt="" width="40px">Eventos
• Interfaz del juego

   </article>

</section>

<style>

   @media (max-width: 768px) {
       #module-site-navigation{
           display: none;
       }
       .container-navigation-mobil{
           display: block;
       }
   }

   .container-navigation-mobil{
       width: 100%;
       margin: 0px;
       padding: 0px;
       display:none;
   }
   .site-navigation-mobile{
       position: fixed;
       top: 0px;
       left: 0px;
       background: rgb(48, 37, 31);
       background-image: url(/skins/MirageWest/images/headline-bgtile.png);
       /*background-image: url(https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
       width: 100%;
       margin: 0px;
       padding-left: 25px;
       padding-bottom: 5px;
       padding-top: 5px;
       z-index: 10;
       box-shadow: inset 0px 0px 30px 2px #140a05;
       
   }
   .button-menu-navigation-mobile{
       color: #e9d3a7;
       font-size: 17px;
       background: transparent;
       border: 0px;
       display: flex;
     align-items: center;
     justify-content: center;
     padding: 3px;
   }
   .button-menu-navigation-mobile:hover{
       background: rgb(78, 60, 50);
   }

   .content-site-navigation-mobile{
       position: relative;
       min-width: 250px;
       width: 250px;
       background: rgb(48, 37, 31);
       /*background-image: url(	https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
       background-image: url(/skins/MirageWest/images/headline-bgtile.png);
       box-shadow: inset 0px 0px 30px 10px #140a05;
       top: 38px;
       left: -250px;
       margin: 0px;
       padding-top: 20px;
       padding-left: 15px;
       padding-right: 15px;
       padding-bottom: 20px;
       border-bottom-right-radius: 20px;
   }

   .content-site-navigation-mobile ul li{
       display: flex;
       align-items: center;
       list-style:none;
       min-height: 40px;
       color: #e9d3a7;
       font-weight: 900;
       font-size: 15px;
       margin: 5px;
       /*padding: 13px;*/
       padding-left: 10px;
       /*background:#46352c;*/
       background-color: rgb(36, 27, 22);
       border-radius: 10px;
       transition: transform 0.2s; 
   }
   .content-site-navigation-mobile ul li:hover{
       background: #e9d3a7;
       color: #46352c;
       font-weight: 900;
       transform: scale(1.10);
   }

</style>