0

Tengo el siguiente navbar, sucede que le aplique un margin de 10% a la izquierda y la derecha porque así quiero que se vea en la versión desktop pero cuando esté en la versión responsive (Por debajo de 768px de ancho) quiero eliminar esos margenes de 10% a ambos lados, es decir, que su valor sea 0.

En el @media screen le aplico el margin de 0% y lo sigue dejando a 10%, no se sobreescribe, aclaro que esto no se si sea posible, sobreescribir ese valor. O que se pueda resetear y luego aplicarle el margin 0 pero no se como hacerlo.

Otra cosa que no se porque sucede es en la versión desktop, los li tienen un padding left que ni idea de donde sale, el padding a la izquierda que le apliqué debería ser mucho mas pequeño que el que esta mostrando ahora.

let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");

navBarToggle.addEventListener("click", function() {
  mainNav.classList.toggle("active");

});
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Josefin Sans", sans-serif;
}

.navbar {
  font-size: 18px;
  background-color: #ffffff;
  border: 0px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
  margin-right: 10%;
  margin-left: 10%;
}

.main-nav {
  list-style-type: none;
  display: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000000;
}

.main-nav li {
  text-align: center;
  margin: 15px auto;
}

.logo {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 20px;
}

.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color: #000000;
  font-size: 24px;
}

.active {
  display: block;
}

.main-nav li {
  margin: 0;
  padding: 0;
}

.main-nav li { 
  padding: 10px 20px 10px 20px;
  margin: 10px 20px 10px 20px !important;
  background-color: #C4D9AE;
}


@media screen and (min-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
  }

  .main-nav {
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
  }

  .main-nav li {
    margin: 0;
  }

  .nav-links {
    margin-left: 40px;
  }

  .logo {
    margin-top: 0;
  }

  .navbar-toggle {
    display: none;
  }

  .logo:hover,
  .nav-links:hover {
    color: rgba(255, 255, 255, 1);
  }
}
<nav class="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
            <i>X</i>
    </span>
    <a href="#" class="logo">logo</a>
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </nav>

7
  • cambiar min-width por max-width ? el padding seguro es por el style en el ul ( le marca a los li si el bullet va dentro o fuera, de ahi que meta un padding o margin para hacerle espacio ) el 22 mar. 2019 a las 3:44
  • Intento esa recomendacion justo ahora y se invierte los diseños. El desktop se muestra a resolucion baja y el movil a resolucion alta.
    – alfredjmg
    el 22 mar. 2019 a las 3:47
  • el CSS va en cascada de arriba hacia abajo, si empezas con estilos mobile los vas reemplazando con min-width, si empezas con desktop los vas reemplazando con max-width el 22 mar. 2019 a las 3:50
  • prueba poner el margin dentro del min y sacarle el important el 22 mar. 2019 a las 3:55
  • 1
    Si, es correcta la respuesta de @alo Malvarez, estaba maquetando en mobile sin darme cuenta que estaba invertido. Ya coloque el margin 0 fuera del media screen y funciono perfectamente.
    – alfredjmg
    el 22 mar. 2019 a las 4: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.