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>