Mobile Issue – Logo
Hi – I am about to launch the website to go live, however I went to do a quick test to see how it will display on several mobile devices. As you can see here at this link: http://www.responsinator.com/?url=http://182.265.myftpupload.com/ that the logo is overlapping the hamburger menu section. I tried adding some codes to adjust it in the CSS, but it doesn't seem to be working 100%. Plus I am wondering if this is something that can be adjusted better for any devices. Please recoginzed that the desktop and laptop have a 75 margin-left in, which I do not want that change.
/*Mobile*/
@media only screen and (max-width: 767px)
#Top_bar .logo {
position: static;
float: left;
width: 80%;
text-align: left;
margin: 0;
}
#Top_bar #logo img.logo-sticky, #Top_bar #logo img.logo-mobile, #Top_bar #logo img.logo-mobile-sticky {
margin-left: -125px !important;
}
/*Mobile*/
@media only screen and (max-width: 767px)
#Top_bar .logo {
position: static;
float: left;
width: 80%;
text-align: left;
margin: 0;
}
#Top_bar #logo img.logo-sticky, #Top_bar #logo img.logo-mobile, #Top_bar #logo img.logo-mobile-sticky {
margin-left: -125px !important;
}
Comments
responsive menu overlap logo because of your custom css so if you don't like how it works, or you need to remove custom css responsible for this issue or wrap this css into right @media tag for larger screens only.
@media only screen and (max-width: 767px)
#Top_bar .logo {
position: static;
float: left;
width: 90%;
text-align: center;
margin: 0;
}