Centric Pro – Header Overlapping Homepage Content on Mobile Devices

[braderz31]

Hi

I've developed a site using the Centric Pro theme and it works great on a PC screen.

For some reason, when viewed on an iPhone... the header is automatically expanded down and so cover the the first line of the Homepage content.

If I scroll down slightly and then back up, the header remains minimised and it's ok.

How can I stop this happening when the visitor firsts lands on the website?

Thanks

Brad

http://108.174.152.251/~pink/

[JanHoek]

That's happening because you have a fixed header. Try to set the header to position: relative; in your media sizes like

@media only screen and (max-width: 782px)
   .site-header {
   padding: 0;
   position: relative;
}

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[braderz31]

Hi Jan

Thank you for your response.

I would still like to keep the header fixed so that you can access the menu regardless of how far down the page you scroll, but the issues is, that the header does not stay minimised when you first view the site. Instead you have to scroll down slightly so that the header minimises and the scroll back up in order to read the main headline in the homepage content. It would be great if I could send a screenshot.

I just wondered if there was a way to keep the header minimised on mobile devices or even just keep it minimised when the visitor first lands on the site

Thanks

[JanHoek]

@media only screen and (max-width: 782px)
.bumper {
margin-top: 50px;
}

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[braderz31]

That's great - thank you very much 🙂

[Author]

Posts