Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #107553
    Craig
    Participant

    I am wondering what the CSS would be to make the front page header image drop down below the masthead like the feature images do on the pages. I only want to do this on tiny screens (eg max-width 414px). I have a transparent logo that works well over the header image on bigger screens, but is not clear on tiny screens. http://www.gmgc.com.au Thanks.

    #107587
    Mahesh
    Keymaster

    @craigbrowne: Go to Dashboard=> Appearance=> Customize=> Additional CSS and add the following CSS:

    @media screen and (max-width: 420px) {
        #masthead {
            background-color: rgb(0, 103, 172);
            position: unset;
        }
    }

    Regards,
    Mahesh

    #107770
    Craig
    Participant

    Thank you Mahesh. This worked. I have actually set things now so that the front page header image drops down on all sizes <1024px. This works well with our logo design. However now I have problem with everything dropping down on these smaller screen sizes on other pages in the site. Everything is fine until the ‘unset’ kicks in on these pages. Is there a way to fix this using CSS or can you recommend another way? Example: http://gmgc.com.au/our-approach/ viewed at less than 1024px.

    #107782
    Mahesh
    Keymaster

    @craigbrowne: Please add the following CSS:

    @media screen and (max-width: 1024px) {
        body.header-bg {
            padding-top: 0;
        }
    }

    Regards,
    Mahesh

    #107787
    Craig
    Participant

    Mahesh you have been fantastic – thank you. I have one last request. The final thing I need to get right is the colour of the masthead. I need it to be transparent on the front page, then rgba(0,103,172,0.9) when you start scrolling. Then on all other pages: when showing full menu it needs to be solid rgb(0,103,172) and then transparent rgba(0,103,172,0.9) when you scroll. And on any pages less than 1024px it just needs to be solid rgb(0,103,172) all the time. If you could help me this one last time it would be terrific – thank you.

    #107871
    Mahesh
    Keymaster

    @craigbrowne: The final thing I need to get right is the color of the masthead. I need it to be transparent on the front page, then rgba(0,103,172,0.9)
    This makes the your header logo and menu invisible since they are both white. Are you sure you want to do this?
    And rgb(0,103,172) and rgba(0,103,172,0.9) won’t make any difference, do you want to make the header more transparent after scrolling?
    Let me know further.

    Regards,
    Mahesh

    #107877
    Craig
    Participant

    HI Mahesh

    I guess what I am really asking is how do you change the colour (and/or transparency) of the main header under the menu. I want everything to behave exactly as I have it now, but with the base colour of the header to be rgb(0,103,172) instead of the default black.

    When I add background-color to things like .site-header or .site-header.fixed, it works but then the front page always has a solid color masthead instead of the initial transparent that is part of your theme. Does this make sense?

    Sincerely
    Craig

    #107890
    Mahesh
    Keymaster

    @craigbrowne: Add the following CSS:

    .site-header.float-header {
        background-color: rgba(0, 103, 172, 0.9);
    }
    @media screen and (max-width: 1024px) {
        #masthead {
            background-color: rgb(0, 103, 172);
        }
    }

    Regards,
    Mahesh

    #107896
    Craig
    Participant

    Ok, so I have added this CSS and everything works perfectly except that on pages other than the front page at screen widths above 1024px the masthead is still black until you start scrolling (when it correctly changes to the translucent blue). So there must be one last bit of CSS. 🙂

    You have been so helpful Mahesh, I really hope you can give me this last little bit.

    #107962
    Mahesh
    Keymaster

    @craigbrowne: Add the following CSS:

    .header-bg .site-header {
         background-color: rgb(0, 103, 172)
     }
      
    .header-bg .site-header.float-header {
        background-color: rgba(0, 103, 172, 0.9);
    }

    Regards,
    Mahesh

    #107968
    Craig
    Participant

    This is awesome. Everything works exactly as I need now. Thank you for the tremendous support. 🙂

    #107989
    Mahesh
    Keymaster

    @craigbrowne: Thank you for your appreciation. Have a nice day!

    Regards,
    Mahesh

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Change header image display on tiny screens’ is closed to new replies.