Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1223331

    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

    #1223536

    Hey Philipp,

    So you want he logo visible when the menu is open on mobile?

    Best regards,
    Jordan Shannon

    #1225447

    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

    #1226699

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.