I am using WordPress , I have a responsive theme that I am using as well. When I view my website on a mobile device, the menu turns into an icon with 3 horizontal lines; its a slide out menu.
On the mobile device the menu is above the 3 lines towards the left instead of them aligning with with each other.
This is the code for the menu icon:
.section-navi .pl-nav > li > a {
line-height: 50px;
padding: 0 13px;
/* opacity: .7; */
}
and this is the code for the logo:
.section-navi .navi-container {
height: 36px;
padding: 7px;
}
please visit: surveillanceshack.com and view on a mobile device.
Try adding the following code:
You might pick a suiting @media query here, if you're targeting iPhones.
Almost every phone starts at min-device-width: 320px, it's up to you to decide what you want as your top limit.
// iPhone 5 & 5S in portrait & landscape
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
.section-navi .navi-container {
min-height: 50px;
padding-right: 0;
box-sizing: border-box;
text-align: left;
}
}Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments