- This topic has 11 replies, 2 voices, and was last updated 7 years, 2 months ago by Mahesh.
-
AuthorPosts
-
January 20, 2017 at 10:05 am #107553CraigParticipant
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 #107587MaheshKeymaster@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,
MaheshJanuary 23, 2017 at 11:16 am #107770CraigParticipantThank 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 #107782MaheshKeymaster@craigbrowne: Please add the following CSS:
@media screen and (max-width: 1024px) { body.header-bg { padding-top: 0; } }
Regards,
MaheshJanuary 23, 2017 at 6:30 pm #107787CraigParticipantMahesh 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 #107871MaheshKeymaster@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,
MaheshJanuary 24, 2017 at 1:48 pm #107877CraigParticipantHI 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
CraigJanuary 24, 2017 at 4:14 pm #107890MaheshKeymaster@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,
MaheshJanuary 24, 2017 at 5:12 pm #107896CraigParticipantOk, 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 #107962MaheshKeymaster@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,
MaheshJanuary 25, 2017 at 11:24 am #107968CraigParticipantThis is awesome. Everything works exactly as I need now. Thank you for the tremendous support. 🙂
January 25, 2017 at 3:51 pm #107989MaheshKeymaster@craigbrowne: Thank you for your appreciation. Have a nice day!
Regards,
Mahesh -
AuthorPosts
- The topic ‘Change header image display on tiny screens’ is closed to new replies.