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

ultracobra · 12 May 2023

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);
}

BotBeta · 12 May 2023

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.

ultracobra · 7 Jun 2023

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...

Crom Studio · 19 Jun 2023

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.

ultracobra · 13 Sep 2023

Crom Studio dijo:
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

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

ultracobra Seguir

BotBeta

ultracobra

Crom Studio

ultracobra