Cómo ajustar nav con CSS para botones más estrechos

  • Autor Autor ultracobra
  • Fecha de inicio Fecha de inicio

ultracobra

Ni
Verificado por Whatsapp
Algo le pasa a este nav y le he dado la vuelta pero noquiere cuadrar, espero alguien pueda ayudarme a ver qué propiedad necesito para angostar el ancho-alto de los botones en elmedia query max 768px

Pongo el trozo completo:
Si saben cómo poner un snippet con dos o más trozos de código, es muy genial pero no vi cómo hacerle...


HTML: 
nav>
  <button class="menu-toggle" aria-label="Toggle menu"></button>
  <div class="main-menu-container">
    <ul class="main-menu">
      <li>
        <a href="#footer-bottom" class="home-bottom-item" title="Inicio parte inferior">
          <i class="fas fa-home"></i>
        </a>
      </li>
      <li class="menu-dropdown">
        <a href="#" class="menu-item" title="Enlaces a la table-board - Re-pulsa las categorías en la table-board principal">Asistencia</a>
        <ul class="submenu">
          <li><a href="#td9">Asistente Dev</a></li>
          <li><a href="#td8">Asistente Copy</a></li>
          <li><a href="#td11">Asistente Audio</a></li>
          <li><a href="#td5">Asistente Digital</a></li>
        </ul>
      </li>
      <li class="menu-dropdown">
        <a href="#" class="menu-item" title="Enlaces a la table-board - Re-pulsa las categorías en la table-board principal">Generación</a>
        <ul class="submenu">
          <li><a href="#td1">Texto a Audio</a></li>
          <li><a href="#td12">Texto a Imagen</a></li>
          <li><a href="#td10">Texto a Video</a></li>
          <li><a href="#td7">Buscador Web</a></li>
        </ul>
      </li>
      <li class="menu-dropdown">
        <a href="#" class="menu-item" title="Enlaces a la table-board - Re-pulsa las categorías en la table-board principal">Edición</a>
        <ul class="submenu">
          <li><a href="#td3">Editor Imagen</a></li>
          <li><a href="#td4">Editor Video</a></li>
          <li><a href="#td6">Editor Logo</a></li>
          <li><a href="#td2">Editor CV</a></li>
        </ul>
      </li>
      <li class="menu-dropdown">
        <button class="menu-contenidos" aria-label="Abrir menú" title="Sección de contenidos - oi_ia">
          <span class="fas fa-book"></span>
        </button> 
        <ul class="submenu">
          <li><a href="#" class="blog-item"><i class="fas fa-newspaper" title="Board - Página detallada de aplicaciones"></i>Board</a></li>
          <li><a href="./blogs/_site/index.html" class="blog-item" title="Blogs - El blog de Oportunidades Ilimitadas"><i class="fas fa-newspaper"></i>Blogs</a></li>
          <li><a href="./blogs/_site/feed.xml" target="_blank"><i class="fas fa-rss" title="RSS de Blogs de Oportunidades Ilimitadas"></i>RSS</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
CSS: 
/* nav */
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #48c0ef;
}

nav .menu-toggle {
  display: none;
} 

nav .main-menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  margin: 10px 20px;
}

nav .main-menu {
  display: flex;
  list-style: none;
  margin-left: auto;
  margin-right: 0;
}

nav .main-menu li {
  margin-left: 40px;
  margin-right: 40px;
}

nav .main-menu li:first-child {
  margin-left: 0;
}

nav .main-menu li a {
  display: block;
  padding: 10px;
  color: #292929;
  text-decoration: none;
}

nav .main-menu li:not(:last-child) {
  margin-right: 10px;
}

nav .home-bottom-item {
  background: transparent;
  cursor: pointer;
  margin-right: 10px;
}

nav .home-bottom-item span {
  margin-right: 0.5rem;
}

nav .menu-item {
  color: blue;
  text-decoration: none;
  padding: 10px;
  border-radius: 20%;
  text-align: center;
  font-size: calc(0.7rem + 5px);
}

nav .menu-item.active {
  background-color: #51ca49;
}

nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #339f33;
  padding: 5px;
  list-style: none;
  margin-right: 15px;
}

nav .submenu li {
  margin-bottom: 10px;
}

nav .submenu li a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px;
}

nav .submenu li:last-child {
  margin-bottom: 0;
}

nav .submenu li:hover > a {
  background-color: #1ad487; 
}

nav .menu-dropdown {
  position: relative;
  display: inline-block;
  min-width: fit-content;
}

nav .menu-dropdown > a {
  width: 120px;
}

nav .menu-dropdown:hover .submenu {
  display: block;
}

nav .menu-contenidos {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
} 

nav .menu-contenidos:focus {
  outline: none;
} 

nav .menu-contenidos-icon {
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s;
} 

nav .menu-contenidos-icon:before,
nav .menu-contenidos-icon:after {
  content: "";
  position: relative;
  width: 24px;
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s;
} 

nav .menu-contenidos-icon:before {
  transform: translateY(-8px);
} 

nav .menu-contenidos-icon:after {
  transform: translateY(8px);
} 

nav .menu-contenidos.active .menu-contenidos-icon {
  transform: rotate(45deg);
}

nav .menu-contenidos.active .menu-contenidos-icon:before {
  transform: translateY(0) rotate(45deg);
}

nav .menu-contenidos.active .menu-contenidos-icon:after {
  transform: translateY(0) rotate(-45deg);
}
 
Podrías incluir el siguiente código en tu CSS para reducir el tamaño de los botones del menú en dispositivos con una resolución máxima de 768px:

Insertar CODE, HTML o PHP: 
@media screen and (max-width: 768px) {
  nav .menu-item {
    font-size: 14px;
    padding: 8px;
  }
}
Esto reducirá el tamaño de la fuente a 14 pixeles y disminuirá el relleno a 8 pixeles. Puedes ajustar los valores según tus necesidades.
 
Es un menu muy loco en modo vanilla con doble despliegue y ademas requiere una funcion javascript adicional que no le he montado aun, pero apuesto que va a quedar muy chido...
 
Para angostar el ancho y alto de los botones en el media query máximo de 768px, puedes agregar el siguiente código CSS dentro de tu archivo de estilos:

CSS: 
@media (max-width: 768px) {
nav .main-menu li a {
padding: 5px; /* Ajusta el valor según el tamaño deseado */
font-size: 0.8rem; /* Ajusta el valor según el tamaño deseado */
}
}

Esto establecerá un nuevo tamaño de padding y fuente para los botones dentro del menú principal cuando la pantalla tenga un ancho máximo de 768px. Puedes ajustar los valores de padding y font-size según tus preferencias para lograr el tamaño deseado de los botones.
 
Pues buena estrategia, gracias, me gusta que los botones puedan
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro