0

tengo el siguiente problema.

Como pueden observar tengo el siguiente Menú lateral:

introducir la descripción de la imagen aquí

Para que sea más bonito visualmente hice que las letras quedaran resaltadas cuando el ratón pasa sobre ellas y lo mismo quería hacer con las banderas. Para ello, generé el siguiente CSS:

    .menu{
  width: 300px;
  height: 100vh;
  background-color: $mainColor;
  position: fixed;
  top: 0;
  right: -300px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;

  &.active {
    right: 0;
  }

  ul{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 30px;
    font-weight: 300;
    color: ghostwhite;
    width: 60%;

    li{
      margin: 15px 0px;
      text-align: center;
      
        img {
          margin-left: 5px;
          margin-right: 5px;
          height: 20%;
          width: 20%;

          &:hover {
            border-radius: 50%;
            border: white 2px solid;
          }
        }
      a{
        font-size: inherit;
        color:inherit;
        text-decoration: none;
      }
      &:hover{
        font-weight: 500;
      }
    }
  }
}

El problema está en que, mientras que con las palabras no tengo ningún problema, al aplicar margen a la bandera seleccionada las líneas <hr/> que hay por encima y por debajo se mueven separándose respectivamente la una de la otra. Entiendo que la bandera pasa a tener más tamaño y que es lógico que se desplacen, pero también lo hacen las palabras al quedar resaltadas. Soy bastante nuevo en CSS y me gustaría saber como podría solucionar esto.

Un saludo.

2
  • 1
    Usa box-sizing:border-box en la caja donde modificas las márgenes, de esa forma el margen se creará hacia adentro..
    – Juan
    Commented el 29 ago. 2021 a las 9:28
  • Muchas gracias @Juan! Funcionó. Commented el 30 ago. 2021 a las 11:18

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.