Mobile view: logo no longer in front of header image in parallax scrolling theme

• 

  ukpoliticos · Member · Jan 25, 2018 at 10:23 am

  • Copy link
  • Add topic to favorites

  Hi
  With themes like twenty-seventeen, lodestar and (in this case) Affinity, mobiles don’t seem to support the scrolling/parallax effect.

  Unfortunately, in mobile view this means my logo no longer appears in front of my header image, but below it. Because the logo is a pale cream colour, it is barely legible (in mobile view) and I’d rather not change the colour as it suits the header image.

  Is it possible to use a CSS media query to do something about this. Is it a case of changing the display or position of the logo (for mobile view)? I’m not quite sure how (or wether it’s possible) to achieve this.

  Alternatively, I thought about making a second header image (to display in mobile view only) with the logo permanently saved onto it. If I did that, how might I compose a media query to display this second alternative header image in mobile view only?

  Any help would be greatly appreciated!

  Many thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  avydun · Staff · Jan 25, 2018 at 10:36 am

  • Copy link

  Hi!

  Is this about http://olivia-and-tom.co.uk/?

• 

  ukpoliticos · Member · Jan 25, 2018 at 10:37 am

  • Copy link

  That was quick! Thanks, yes it is.

• 

  ukpoliticos · Member · Jan 25, 2018 at 11:22 am

  • Copy link

  Update:

  I have managed to select an alternative header image for mobile view (one with the logo permanently saved into it).

  @media screen and (max-width:480px){
  .custom-header-image{
  background-image:url(https:/…/…/picture.jpg) !important;
  }
  }

  Now, I just need to find out how to [display:none] the site logo in mobile view, so that it doesn’t (effectively) appear twice!

• 

  ukpoliticos · Member · Jan 25, 2018 at 11:34 am

  • Copy link

  Nope! My mistake. That selector (.custom-header-image) changes all the featured images to the alternative header image in mobile view. Working on finding the selector to change just the header image in mobile view …

• 

  ukpoliticos · Member · Jan 25, 2018 at 12:51 pm

  • Copy link

  Got it!

  The selector for the customer header image only (and not including any featured images) is …

  header#masthead.site-header >div.custom-header > .custom-header-image

  To hide the logo …
  .custom-logo{
  display: none;
  }

• 

  merelyguns · Member · Jan 25, 2018 at 3:43 pm

  • Copy link

  I believe the code you’re looking on your original post would be z-index element. This specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

  You could add z-index: 100; to your code with the custom logo, and it would appear as the highest stack on top of other elements with lower z-indexes.

• 

  ukpoliticos · Member · Jan 25, 2018 at 5:16 pm

  • Copy link

  Thanks, I’ll give that a try.

• 

  thesacredpath · Member · Jan 30, 2018 at 1:57 am

  • Copy link

  @ukpoliticos, is this now resolved? If not, please let us know and we can help.

• 

  ukpoliticos · Member · Feb 5, 2018 at 2:20 pm

  • Copy link

  Thank you. It’s resolved.

• 

  thesacredpath · Member · Feb 5, 2018 at 7:15 pm

  • Copy link

  Great, and do let us know if you have additional questions or problems.