JonD JonD - 30 days ago 8
jQuery Question

Some issues styling a mobile slide left menu

Im doing a responsive slide left menu but it has some layout issues. I want that when the mobile menu icon is clicked the mobile menu appear right below the yellow div, Im using margin-top:70px for then in other browsers with this approach the menu dont appears right below the yelow div.

Then when the mobile icon is clicked i want to change the icon font class from "fa-fa-bars" to "fa-fa-close". But its not working.

And then the "Item Mobile link" dont appears aligned centered with the other header elements, is a bit above.

Example:https://jsfiddle.net/4ggsmqje/1/

For example in this example:https://jsfiddle.net/4ggsmqje/4/ the layout appears as I want but with a " margin-top:80px;" on the .Mobile__nav div and with a "margin-top: 15px;" on the "Item Mobile" link. But with this approach it appears different in other browsers, the mobile slide left menu dont appears right below the yellow div but a bit above or below.

HTML:

<div class="Header" style="background:yellow;">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-4 col-sm-4 d-md-none d-lg-none d-xl-none">
<div class="Header__mobile__menu">
<a id="mobile" href=""><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-4 col-sm-4 d-md-none d-lg-none d-xl-none">
<div class="Header__logo">
<a href="">Logo</a>
</div>
</div>
<div class="col-4 col-4 co-sm-4 d-md-none d-lg-none d-xl-none">
<ul>
<li><a href>Item Mobile</a></li>
</ul>
</div>
<div class="d-none d-md-block d-lg-block d-xl-block col-md-4">
<div class="Header__logo">
<a href="">Logo</a>
</div>
</div>
<ul class="Mobile__nav">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5 <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>
<div class="col-8 col-sm-8 d-none d-md-block">
<ul class="Header__nav">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</div>
</div>
</div>


CSS:

.Header{
padding: 15px 0;
border-bottom: 1px solid orange;
}

.Mobile__nav{
margin-top:70px;

position: fixed;
left: 0;
top: 0;
width: 76%;
height: 100%;
min-width: 200px;
max-width: 340px;
background-color: gray;
z-index: 1000;
overflow: hidden;
overflow-y: auto;

li{
display: block;
width: 100%;
padding: 20px;
}

li a{
color: orange;

}
}

.Header__logo{
h1{
color: orange;
}
}

.Header__mobile__menu{
cursor: pointer;
float: left;
a{
color: orange;
}
}


jquery:

$('#mobile').click(function() {
$("i", this).toggleClass("fa-fa-bars fa-fa-close");
});

Answer Source

The "Item Mobile" text is not aligned vertically because it is wrapped inside a ul element and the ul element has margin that screws the alignment up. You can (or as best practices suggest, you should) use a css reset for your project. If you don't want to do that (for any reason) just write a rule that removes the ul margin i.e. ul{ margin:0; }

Also for the position of the "Mobile__nav" element you shouldn't use margin (although you can) to position it because it is a fixed position element instead you must align your element using the top property.

Some browsers act unexpectedly on different rules (like margin) so we should always try to stick to the best practices. That's another reason why you should use a css reset, to make all the preset default values of the browsers the same.

Please take a look at this example.