Centric Pro – Header Overlapping Homepage Content on Mobile Devices

Community Forums Forums General Discussion Centric Pro – Header Overlapping Homepage Content on Mobile Devices

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  braderz31 5 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #112101

    braderz31
    Member
    Post count: 15

    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/
    #112103

    JanHoek
    Member
    Post count: 214

    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.

    #112106

    braderz31
    Member
    Post count: 15

    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

    #112113

    JanHoek
    Member
    Post count: 214

    @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.

    #112597

    braderz31
    Member
    Post count: 15

    That’s great – thank you very much :-)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.