1

Estoy haciendo un menú hamburguesa en versión mobile (se visualiza cuando achicas) y estoy teniendo problemas con la X cuando cierra, si bien funciona todo bien el problema con este menú es que cuando se abre y aparece la X se desalinea con respecto al icono de la izquierda del teléfono, quisiera saber si hay alguna forma de que quede alineado también.

Si bien también probé subirlo desde css, pero no queda bien

$(document).ready(function() {
  menu_init();
});

function menu_init() {
  $('.menu').click(function(event) {
    $('body').toggleClass('o');
  })
}
#menu {
  position: absolute;
  width: 100%;
  background-color: transparent;
  margin-top: 15px;
  z-index: 9;
  background-image: transparent;
}

.menu-principal {
  margin-top: 30px;
  font-family: 'Univers';
  font-weight: bold;
  color: #ffffff;
  float: right;
}

.navbar-default .menu-principal a {
  padding: 10px 10px;
  color: #ffffff;
}

.navbar-default .menu-principal>li>a {
  color: #fff;
  text-shadow: initial;
}

.navbar-default .menu-principal>li>a:hover {
  color: #ffd100;
  text-shadow: initial;
}

.navbar-default .menu-principal>.active>a {
  background-color: initial;
  background-image: initial;
  box-shadow: initial;
  color: #ffd100;
}

.navbar-default .menu-principal>.active>a:hover {
  background-color: initial;
  background-image: initial;
  color: #ffd100;
}

.navbar-default {
  background-color: transparent;
  border-color: transparent;
  background-image: initial;
  box-shadow: initial;
}

.navbar {
  margin-bottom: 0px;
}

.navbar-ex1-collapse>.menu-mobile li {
  height: auto;
  display: block;
  padding: 2px 6px;
}


/*HAMBURGESA RESPONSIVE MENU*/

#linea-telefonica2 i {
  color: #ffd100;
  font-size: 25px;
  float: left;
  padding-left: 8px;
  margin-top: 22px;
}

.logo-img-mobile {
  position: relative;
  z-index: 11;
  top: 22px;
}

.menu {
  height: 50px;
  width: 0px;
  position: absolute;
  right: 50px;
  transition: 0.3s;
  cursor: pointer;
  top: 8px;
}

.menu .bar {
  height: 2px;
  width: 27px;
  display: block;
  position: absolute;
  background-color: #fff;
  border-radius: 1px;
  transition: 0.4s;
}

.menu .bar:nth-of-type(1) {
  top: 14px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.menu .bar:nth-of-type(2) {
  top: 23px;
  transition: 0.3s ease 0.3s;
}

.menu .bar:nth-of-type(3) {
  top: 32px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  top: 23px;
  transform: rotate(0deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(2) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(3) {
  top: 23px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

.menu-mobile .btn-registrate-mobile {
  background-color: #e7c73a;
}

.menu-mobile .btn-registrate-mobile a {
  color: #000;
}

.menu-mobile .btn-registrate-mobile a:hover {
  color: #333
}

.menu-mobile .btn-cuenta-mobile a:hover {
  color: #fff
}

.menu-mobile i {
  z-index: 13;
  position: relative;
  color: #fff;
  float: left;
  margin-left: 3px;
  margin-right: 7px;
  margin-top: 11px;
  font-size: 16px;
}


/************************************************************************************/


/******************************MENU FIJO SCROLL**********************************/


/***********************************************************************************/

.menu-fixed {
  background-color: #000;
  height: 66px;
}

.menu-fixed img {
  margin-top: 5px;
}

.menu-fixed .menu-scroll ul {
  float: right;
  margin-top: 23px;
}

.menu-fixed .menu-scroll ul li {
  list-style: none;
  display: inline-block;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  display: block;
}

.menu-fixed .menu-scroll ul>.active>a {
  color: #ffd100;
}

.menu-fixed .menu-scroll ul li a {
  padding: 0px 8px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.menu-fixed .menu-scroll ul li a:hover {
  color: #ffd100;
}


/*-------------------------------------------*/

.dropdown-menu {
  right: 0;
  left: inherit;
}

.menu-fixed .menu-scroll .dropdown-menu {
  background-color: black;
  padding: 5px 10px;
  position: absolute;
  right: 0px;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  padding: 5px 0px;
  font-size: 12px;
}

.menu-fixed .menu-scroll .dropdown-menu a:hover {
  background: black;
  color: #ffd100;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile {
  background-color: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a {
  background: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a:hover {
  color: #fff;
}

.logo-mobile {
    background-color: #000;
    margin-bottom: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >


<header>
  <!-- MENU PRINCIPAL MOBILE-->
  <div class="navbar-header logo-mobile">
    <div class="col-xs-3 col-sm-2 col-md-5 hidden-sm hidden-lg hidden-md" id="linea-telefonica2">
      <a href=""><i class="fa fa-phone" aria-hidden="true"></i></a>
    </div>
    <!-- LOGO -->
    <div class="col-xs-6 col-sm-12 col-md-3 col-lg-1  hidden-sm hidden-md hidden-lg">
      <a class="navbar-brand" style="width: 65px; height: 63px;" href="index.html">
        <img class="center-block logo-img-mobile" src="http://qkstudiodemo.com/pagofacil/v1/images/logo-pf-header-mobile.svg" alt="Logo de Pago Facil">
      </a>
    </div>
    <div class="col-xs-3 col-sm-12 col-md-3 col-lg-1 hidden-sm hidden-md hidden-lg">
      <!-- HAMBURGESA -->
      <div class="menu" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"> </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-1 sin-padding hidden-sm hidden-md hidden-lg">

    <!-- MENU PRINCIPAL MOBIEL -->
    <div class="collapse navbar-collapse navbar-ex1-collapse sin-padding ">
      <ul class="nav navbar-nav menu-mobile hidden-lg hidden-md hidden-sm">
        <li class="dropdown active">
          <a href="#">SERVICIOS</a>
        </li>
        <li>
          <a href="#">¿QUÉ PUEDO PAGAR?</a>
        </li>
        <li>
          <a href="#">IMPRIMÍ TU FACTURA</a>
        </li>
        <li>
          <a href="envio-dinero.html">ENVIO DE DINERO</a>
        </li>
        <li>
          <a href="novedades.html">NOVEDADES</a>
        </li>
        <li>
          <a href="contacto.html">CONTACTO</a>
        </li>
        <li>
          <i class="fa fa-search mostrar" aria-hidden="true" style="color:#fff;cursor: pointer;"></i>
        </li>
      </ul>

      <!-- Menu de contactos -->
      <ul class="nav navbar-nav navbar-right menu-mobile menu-iconos hidden-lg hidden-md hidden-sm" style="background-color: #333333;border-top: 3px solid #ba237f;">
        <li>
          <a href="#">¿QUÉ ES PAGO FÁCIL?</a>
        </li>
        <li>
          <i class="fa fa-question" aria-hidden="true"></i><a href="#">PREGUNTAS FRECUENTES</a>
        </li>
        <li>
          <i class="fa fa-map-marker" aria-hidden="true"></i><a href="locales.html">SUMÁ TU LOCAL</a>
        </li>
        <li>
          <i class="fa fa-files-o" aria-hidden="true"></i><a href="">SUMÁ TU EMPRESA</a>
        </li>
        <li class="btn-registrate-mobile">
          <a href="">REGISTRATE</a>
        </li>
        <li class="btn-cuenta-mobile">
          <a href="">MI CUENTA</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- /MENU PRINCIPAL MOBILE-->


</header>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2
  • Hola MarianoF, por favor no hagas ediciones triviales que perjudican la publicación en lugar de mejorarla. Cosas como "Ayuda" o "Urgente" no deberían ponerse en el título o en el cuerpo de la pregunta porque sólo añaden ruido. Lee Cómo preguntar para más información.
    – Alvaro Montoro
    Commented el 8 may. 2018 a las 15:53
  • Hola Alvaro muchas gracias por la ayuda ahi lo voy a mirar bien y cualquier cosa te comento. Voy a tener en cuenta esto que me comentas ultimo. gracias!
    – MarianoF
    Commented el 8 may. 2018 a las 15:56

1 respuesta 1

1

El problema está en esta parte del CSS:

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  top: 23px;
  transform: rotate(0deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(2) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(3) {
  top: 23px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

Lo que se hace es que al pulsar en el menú, todas las barras se "unen" en la central y se rotan para formar la X. Entonces van a tener la posición vertical de la barra central. Lo que puedes hacer es o bien hacer que las barras se unan a la barra superior (en lugar de la central) o bien mover las barras al final de la animación para que la X suba un poco su posición.

La primera opción es más sencilla porque sólo necesitas cambiar al top de 23px a 14px y ya se soluciona el problema. Pero si además quieres que se vea algo mejor, deberías cambiar la animaciones de la primera y segunda barra. De ese modo ya se ve algo más limpio:

.menu .bar:nth-of-type(1) {
  top: 14px;
  transition: 0.3s ease 0.3s;
}

.menu .bar:nth-of-type(2) {
  top: 23px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.menu .bar:nth-of-type(3) {
  top: 32px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(2) {
  transform: rotate(0deg);
  top: 14px;
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(3) {
  top: 14px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

Aquí lo puedes ver funcionando:

$(document).ready(function() {
  menu_init();
});

function menu_init() {
  $('.menu').click(function(event) {
    $('body').toggleClass('o');
  })
}
#menu {
  position: absolute;
  width: 100%;
  background-color: transparent;
  margin-top: 15px;
  z-index: 9;
  background-image: transparent;
}

.menu-principal {
  margin-top: 30px;
  font-family: 'Univers';
  font-weight: bold;
  color: #ffffff;
  float: right;
}

.navbar-default .menu-principal a {
  padding: 10px 10px;
  color: #ffffff;
}

.navbar-default .menu-principal>li>a {
  color: #fff;
  text-shadow: initial;
}

.navbar-default .menu-principal>li>a:hover {
  color: #ffd100;
  text-shadow: initial;
}

.navbar-default .menu-principal>.active>a {
  background-color: initial;
  background-image: initial;
  box-shadow: initial;
  color: #ffd100;
}

.navbar-default .menu-principal>.active>a:hover {
  background-color: initial;
  background-image: initial;
  color: #ffd100;
}

.navbar-default {
  background-color: transparent;
  border-color: transparent;
  background-image: initial;
  box-shadow: initial;
}

.navbar {
  margin-bottom: 0px;
}

.navbar-ex1-collapse>.menu-mobile li {
  height: auto;
  display: block;
  padding: 2px 6px;
}


/*HAMBURGESA RESPONSIVE MENU*/

#linea-telefonica2 i {
  color: #ffd100;
  font-size: 25px;
  float: left;
  padding-left: 8px;
  margin-top: 22px;
}

.logo-img-mobile {
  position: relative;
  z-index: 11;
  top: 22px;
}

.menu {
  height: 50px;
  width: 0px;
  position: absolute;
  right: 50px;
  transition: 0.3s;
  cursor: pointer;
  top: 8px;
}

.menu .bar {
  height: 2px;
  width: 27px;
  display: block;
  position: absolute;
  background-color: #fff;
  border-radius: 1px;
  transition: 0.4s;
}

.menu .bar:nth-of-type(1) {
  top: 14px;
  transition: 0.3s ease 0.3s;
}

.menu .bar:nth-of-type(2) {
  top: 23px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.menu .bar:nth-of-type(3) {
  top: 32px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(2) {
  transform: rotate(0deg);
  top: 14px;
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(3) {
  top: 14px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

.menu-mobile .btn-registrate-mobile {
  background-color: #e7c73a;
}

.menu-mobile .btn-registrate-mobile a {
  color: #000;
}

.menu-mobile .btn-registrate-mobile a:hover {
  color: #333
}

.menu-mobile .btn-cuenta-mobile a:hover {
  color: #fff
}

.menu-mobile i {
  z-index: 13;
  position: relative;
  color: #fff;
  float: left;
  margin-left: 3px;
  margin-right: 7px;
  margin-top: 11px;
  font-size: 16px;
}


/************************************************************************************/


/******************************MENU FIJO SCROLL**********************************/


/***********************************************************************************/

.menu-fixed {
  background-color: #000;
  height: 66px;
}

.menu-fixed img {
  margin-top: 5px;
}

.menu-fixed .menu-scroll ul {
  float: right;
  margin-top: 23px;
}

.menu-fixed .menu-scroll ul li {
  list-style: none;
  display: inline-block;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  display: block;
}

.menu-fixed .menu-scroll ul>.active>a {
  color: #ffd100;
}

.menu-fixed .menu-scroll ul li a {
  padding: 0px 8px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.menu-fixed .menu-scroll ul li a:hover {
  color: #ffd100;
}


/*-------------------------------------------*/

.dropdown-menu {
  right: 0;
  left: inherit;
}

.menu-fixed .menu-scroll .dropdown-menu {
  background-color: black;
  padding: 5px 10px;
  position: absolute;
  right: 0px;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  padding: 5px 0px;
  font-size: 12px;
}

.menu-fixed .menu-scroll .dropdown-menu a:hover {
  background: black;
  color: #ffd100;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile {
  background-color: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a {
  background: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a:hover {
  color: #fff;
}

.logo-mobile {
    background-color: #000;
    margin-bottom: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >


<header>
  <!-- MENU PRINCIPAL MOBILE-->
  <div class="navbar-header logo-mobile">
    <div class="col-xs-3 col-sm-2 col-md-5 hidden-sm hidden-lg hidden-md" id="linea-telefonica2">
      <a href=""><i class="fa fa-phone" aria-hidden="true"></i></a>
    </div>
    <!-- LOGO -->
    <div class="col-xs-6 col-sm-12 col-md-3 col-lg-1  hidden-sm hidden-md hidden-lg">
      <a class="navbar-brand" style="width: 65px; height: 63px;" href="index.html">
        <img class="center-block logo-img-mobile" src="http://qkstudiodemo.com/pagofacil/v1/images/logo-pf-header-mobile.svg" alt="Logo de Pago Facil">
      </a>
    </div>
    <div class="col-xs-3 col-sm-12 col-md-3 col-lg-1 hidden-sm hidden-md hidden-lg">
      <!-- HAMBURGESA -->
      <div class="menu" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"> </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-1 sin-padding hidden-sm hidden-md hidden-lg">

    <!-- MENU PRINCIPAL MOBIEL -->
    <div class="collapse navbar-collapse navbar-ex1-collapse sin-padding ">
      <ul class="nav navbar-nav menu-mobile hidden-lg hidden-md hidden-sm">
        <li class="dropdown active">
          <a href="#">SERVICIOS</a>
        </li>
        <li>
          <a href="#">¿QUÉ PUEDO PAGAR?</a>
        </li>
        <li>
          <a href="#">IMPRIMÍ TU FACTURA</a>
        </li>
        <li>
          <a href="envio-dinero.html">ENVIO DE DINERO</a>
        </li>
        <li>
          <a href="novedades.html">NOVEDADES</a>
        </li>
        <li>
          <a href="contacto.html">CONTACTO</a>
        </li>
        <li>
          <i class="fa fa-search mostrar" aria-hidden="true" style="color:#fff;cursor: pointer;"></i>
        </li>
      </ul>

      <!-- Menu de contactos -->
      <ul class="nav navbar-nav navbar-right menu-mobile menu-iconos hidden-lg hidden-md hidden-sm" style="background-color: #333333;border-top: 3px solid #ba237f;">
        <li>
          <a href="#">¿QUÉ ES PAGO FÁCIL?</a>
        </li>
        <li>
          <i class="fa fa-question" aria-hidden="true"></i><a href="#">PREGUNTAS FRECUENTES</a>
        </li>
        <li>
          <i class="fa fa-map-marker" aria-hidden="true"></i><a href="locales.html">SUMÁ TU LOCAL</a>
        </li>
        <li>
          <i class="fa fa-files-o" aria-hidden="true"></i><a href="">SUMÁ TU EMPRESA</a>
        </li>
        <li class="btn-registrate-mobile">
          <a href="">REGISTRATE</a>
        </li>
        <li class="btn-cuenta-mobile">
          <a href="">MI CUENTA</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- /MENU PRINCIPAL MOBILE-->


</header>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

5
  • Solo tendría que agregar el css que destacaste arriba? para acomodarlo?
    – MarianoF
    Commented el 8 may. 2018 a las 16:02
  • No, ese es tu CSS. Voy a editar la respuesta para resaltar los cambios que he hecho. Dame un segundo.
    – Alvaro Montoro
    Commented el 8 may. 2018 a las 16:04
  • bueno dale gracias
    – MarianoF
    Commented el 8 may. 2018 a las 16:05
  • Ahi logre comprender lo que me decías Alvaro. Perdón !
    – MarianoF
    Commented el 8 may. 2018 a las 16:11
  • Hola Alvaro quería preguntarte si podes ayudarme con esto es.stackoverflow.com/questions/163243/…
    – MarianoF
    Commented el 10 may. 2018 a las 13:44

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.