[Resolved] different header or css for mobile devices…

[Stefan Finkensieper]

Hi Support,

we need to use a different header for mobile devices, or script to make sure that this logo fits to navigation. Please check online with different devices with the following url.
For Desktop everything fits well… URL: http://www.hup-products.de/aldi/
On iPhone you will see broken logo on left hand side.

Thanks for quick response.
Stefan

[Tom]

Hi there,

Interesting method for adding the logo!

Instead of doing it this way, you may want to upload it through “Customize > Site Identity”.

Then try this CSS (will need adjustment):

.inside-header {
      position: relative;
}

.site-logo {
      position: absolute;
      left: 0;
      bottom: -30px;
}

[Stefan Finkensieper]

Hi Tom,

thanks for quick response, now displaying position is correct, but there is a rollover effect. Bottom of logo overlayed by dark blue fond on mobile devices (-30px!?)

Best Regards
Stefan

[Tom]

So close! 🙂

Try this:

.site-logo {
    position: absolute;
    left: 20px;
    bottom: -30px;
    z-index: 9999;
}

[Stefan Finkensieper]

Hi Tom,

perfect – thanks for best support and perfect Framework!!!

Stefan

[Tom]

You’re welcome 🙂

[Evie]

I have posted this item in another spot too

Background image position instructions, can you tell me or give me an example of what to put in the position input box, it is unclear to me as to what it requires? All of these parameters or one? can you give me an example please?

left top, x% y%, xpos ypos (px)

I would like my small logo(220pxx220px) to appear on the left hand side in the background.

[Tom]

Hi there,

Answered you in the other thread: https://generatepress.com/forums/topic/image-span-100-again/#post-134384

[Author]

Posts