Estoy creando una barra de navegación receptiva con js, css y html. Tengo un problema en este momento, cuando la pantalla se convierte en x tamaño (el tamaño que definí como ancho máximo) aparece la ventana emergente de la barra de navegación receptiva. Aunque, solo el último ancla (Loja) aparece en eso. Quiero que se muestre flex y flex-direction to column. Como muestra esta impresión:

https://imgur.com/aXjZD8z

https://imgur.com/8s0J6tc

https://jsfiddle.net/tL2vp9k5/1/

  <header>
      <nav class="menu">   
        <div>
         <ul class="ulLogo">
          <li title="Logo Carla Ornelas">
          
            <a href="#"><img id="espiral" src="../Logo.png"></a>
            
          </li>
         </ul> 
        </div>
        <div>
        <ul class="ulSecções">
         <li> <a href="../Main page/index.html" title="Home">Home</a> </li>
         <li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
         <li><a href="#" title="Cursos">Cursos</a> </li>
          <li><a href="#" title="Conteudos Especiais">Conteúdos Especiais</a>  </li>
            <li><a href="#" title="Conteudos Especiais">Recursos</a></li>
         <li> <a href="" title="Contatos">Contatos</a> </li>
         <li> <a href="" title="Acesse a nosa loja" class="loja">Loja <i class="fa fa-shopping-cart" aria-hidden="true"></i> </a></li>
        </ul>
        </div>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
  </header>


/*Universal Commands*/
*{
    padding:0;
    margin:0;
    text-decoration: none;
}


                                             /*Nav bar*/
/*Background Menu*/

nav.menu {

    width:100%;
    height: 85px;
    background-color: rgb(24, 24, 24);
    box-shadow: 0px 1px 16px 3px;
}


/*Costumização do body */

body {
    background-color: rgb(255, 255, 255);
}
body .menu{
    position:fixed;
    z-index: 100;
}

/*Costumização logo */



.ulLogo li  {

    list-style: none;
}


.ulLogo li a img{

    width: 180px;
    float:left;
    padding: 19px 0px 0px 60px;

}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {

    opacity: 0.7;
    transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {

    opacity: 1;
    transition: opacity 399ms linear 0s;
}

/*Costumização sections */
nav .ulSecções {

    float: left;
    padding-left: 90px;
}

nav ul.ulSecções li{ 

    float: left;
    list-style: none;
    position: relative;
    line-height: 90px;
}

nav ul.ulSecções li a{

    
    display:block;
    font-family: "Ubuntu", "Palatino", sans-serif ;
    color:rgb(192, 163, 68);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
    opacity: 0.9;

    padding: 0px 18px;
}

nav ul.ulSecções li a i{

    font-size: 16px;

}
nav ul.ulSecções li a.loja{

    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
}

/* Transition das anchors */

nav ul.ulSecções li a:hover {

    color: rgb(255, 255, 255);
    opacity: 1;
    transition: color 150ms ease-in 0s,
                opacity 150ms ease-in 0s;

}

nav ul.ulSecções li a:not(:hover) {

    color: rgb(204, 174, 75);
    opacity: 0.9;
    transition: color 150ms ease-in 0s,
                opacity 150ms ease-in 0s;

}

/*Mobile screen adjustments*/

@media screen and (max-width: 1250px){
    nav ul.ulSecções li {

    position: absolute;
    right: 0px;
    height: 92vh;
    top: 14vh;
    background-color: rgb(24, 24, 24);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    }
}  ``` 
0
hugoCurto 4 ago. 2020 a las 13:18

1 respuesta

La mejor respuesta

Todos tus elementos <li> tienen exactamente la misma posición, por lo que están superpuestos. Si elimino el fondo, puede ver esto claramente (vea la imagen en la parte inferior).

Debe seleccionar su elemento <ul>, no los elementos <li>

/* @media screen and (max-width: 1250px){
    nav ul.ulSecções li { */
@media screen and (max-width: 1250px) {
  nav ul.ulSecções {

enter image description here

1
Jannes Carpentier 4 ago. 2020 a las 10:32