Hi there,
i’d like to move the logo on small devices up, wich works fine with this code
@media only screen and (max-width: 767px){
.responsive .logo img {
top: -20px
}
}
but then id hides underneath the phone info / top bar. I don’t find the right class or id to set a higher z-index.
can you help me with this?
thank you
katharina
Hey Philipp,
So you want he logo visible when the menu is open on mobile?
Best regards,
Jordan Shannon
Sorry for the late reply, didn’t realise you’ve answered. No, i just want to move it up a little bit. The logo hides underneath the top bar, so it seems to be cut off, you only see half of the logo. At the moment i removed the code i wrote in my first post because the site is life and can’t leave it with a bug….
I face this problem very often, that – when i want to move the logo up or down, or change the size of it on certain devices – its cut off. Event if it works fine on tablet portrait mode it changes on mobile or the other way round. I don’t really understand, why the style of the header section changes (also for instance the font colors change) on the different devices.
thank you
katharina
Hi Katharina,
Sorry for the late reply!
Please use following code instead
@media only screen and (max-width: 767px) {
.responsive .logo img {
padding-bottom: 30px;
}}
When you move your logo up, it moves behind header meta section and since header meta section does not have transparent background, your logo is cut off. Code above would add bottom padding to your logo on small devices and make it centered :)
Best regards,
Yigit