Menu covering Header Image on Mobile Devices


#1

Hi guys,

Firstly GREAT theme - thank you! :slight_smile:

I’ve had a few things I’ve needed to tweak to get the theme working on mobile devices and managed so far through various posts however I can’t find a solution to a problem on an ipad when in landscape mode even through here or the wordpress forum.

When in landscape the menu is cutting of the top of my header image. It’s fine in portrait and also fine in both landscape and portrait on my mobile phone… not sure if just specific to ipads?

Many thanks,

Rachel

P.S… Apologies if this query has already been resolved but I couldn’t find it when scrolling through and also searching!


#2

Dear Rachel,

Thank you for getting in touch here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin?

@media only screen and (max-width: 1024px){
  
  .site-header{
    background-color: transparent !important;
  }
  
}

@media only screen and (max-width: 991px){
  
  #masthead.site-header{
    background-color: transparent !important;
    position: fixed !important;
  }
  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis


#3

Hey Kharis,

Thank you :slight_smile: I’ve input that into the plug in and I can now see the full header image properly but my menu header is now transparent so I have my Site Title/ description floating over the other text on blog posts etc rather than having a clean menu (it was white).

If that’s the only thing we can do for now I’ll leave it as transparent as better than cutting off the image.

Also on the facts widget it’s layering the text over the bar graph? Am guessing you can only have so many characters to prevent this or is there code I can add to make sure it adjusts for mobile? Also would you prefer I put this question on another new thread? :slight_smile:

Many thanks,

Rachel


#4

Hey Khari update the transparent menu solution doesn’t work as now it completely overlays all the site title, description and menu over the top of the header image when in portrait! :frowning: This view actually worked prior to using this code but REALLY bad/messy now. I’ll have to remove the code and hope you guys can find a way to prevent the header image being cut off in landscape mode on mobile devices :slight_smile:

Will wait to hear back from you…

Rachel


#5

Dear Rachel,

Thank you for updating me.

Could you please try to apply the following CSS code?

@media only screen and (min-width: 992px) and (max-width: 1024px){
  
  #slideshow{
    margin-top: 119px;
  }
  
}  

Let me know how it works.

Regards,
Kharis