Change header image display on tiny screens

This topic has 11 replies, 2 voices, and was last updated 7 years, 10 months ago by Mahesh.

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

Author

Posts
January 20, 2017 at 10:05 am #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.

January 20, 2017 at 4:14 pm #107587
Mahesh
Participant
@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
January 23, 2017 at 11:16 am #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.

January 23, 2017 at 5:02 pm #107782
Mahesh
Participant
@craigbrowne: Please add the following CSS:
```
@media screen and (max-width: 1024px) {
    body.header-bg {
        padding-top: 0;
    }
}
```
Regards,
Mahesh
January 23, 2017 at 6:30 pm #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.

January 24, 2017 at 12:29 pm #107871

Mahesh
Participant

@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

January 24, 2017 at 1:48 pm #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

January 24, 2017 at 4:14 pm #107890
Mahesh
Participant
@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
January 24, 2017 at 5:12 pm #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.

January 25, 2017 at 10:35 am #107962
Mahesh
Participant
@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
January 25, 2017 at 11:24 am #107968

Craig
Participant

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

January 25, 2017 at 3:51 pm #107989

Mahesh
Participant

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

Regards,
Mahesh
Author

Posts