[Craig]

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.

[Mahesh]

@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

[Craig]

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.

[Mahesh]

@craigbrowne: Please add the following CSS:

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

Regards,
Mahesh

[Craig]

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.

[Mahesh]

@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

[Craig]

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

[Mahesh]

@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

[Craig]

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.

[Mahesh]

@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

[Craig]

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

[Mahesh]

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

Regards,
Mahesh

[Author]

Posts