Header Image in mobile mode drops below Header area


#1

When viewing my page on a full screen the Header image shows properly. However, when I view in a smaller screen or in mobile mode the Header image drops below the Header area. If I remove the Header image I can not view the top area of Posts Page or Miwo Shopping Plugin. Disabling the overlay does not affect.

Great theme and awesome support. I’ve been able to work through many of my preferences via searching these forums.


#2

Hello there,

Thank you for getting in touch.

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

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

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

Warmest regards,
Kharis


#3

Good evening and thank you for the response. I pasted the code into the Custom CSS module.

When I am logged into the Wordpress Dashboard and viewing on a smaller screeen (ie, when the menu changes into drop down menu) the header image drops below the header area.

If I log off from Wordpress the image appears below the header area for a very brief moment and then it appears in the proper header area.


#4

Hello there,

Thank you for reporting.

It happens because the WP admin bar takes 46px height at the top of the screen. I thought you should add the following CSS code.

@media only screen and (max-width: 782px){
  .admin-bar .site-header, 
  .admin-bar .site-header.float-header {
      top: 46px;
  }
}

Let me know how it goes.

If it doesn’t meet the solution, could you please post your screenshot here for I can’t be logged in to your site?

Warmest regards,
Kharis


#5

Good afternoon,
Thank you for the new code. I pasted it in the CSS plug in as suggested and the issue remains. I made a short video that shows the issue in action. When the page is in mobile mode the header background image shows below the header area for a brief moment and then returns to the header area. The previous code works well to hide it quickly.


#6

Hello there,

Thank you for reporting.

Could you please try the following?

#masthead.site-header{
  position: fixed;
}

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

Warmest regards,
Kharis


#7

Perfecto. This is why you guys are rockstars!

Here is the final code that is in use:

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


#8

Hello there,

Nice!

I’m glad to have an opportunity to assist you.

Please let us know if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, would you please rate our product here? We would highly appreciate it.

Warmest regards,
Kharis