Unique Mobile Header Variations


#1

Dear Developers,
Thank you for the great theme!
I am having an issue with mobile header image.
My website is 406acupuncture.com
Here are my settings: I am using two different header images as designed by your theme - large header for the desktop and a small header for the mobile. My header is the same on all pages so it has been working great for me. However, I recently needed to use a different header on one of the pages. I utilized a ‘unique headers’ plugin just for that 1 page where I need the header to be different. It looks great on desktop and everything is working. However, on mobile, that page reverts to the main small header that I use on the rest of the website. Is there a way to use two different size headers for this one special page, the large one for desktop and small one for mobile without affecting the rest of the pages that have a universal header? The special page in question is https://406acupuncture.com/acupuncture-veterans/
Thank you so much!!!


#2

Hello, thank you for detailed explanation :slight_smile:

I would be glad to help you, but first please upload to Media Library small header image that you would like to use for that particular page and copy its link here.

Kind Regards, Roman.


#3

Thank you so much Roman! Here is the link for the small header image for that one page:


#4

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 1024px) {
  body.page-id-20 .large-header {
    display: initial !important;
  }

  body.page-id-20 .small-header {
    display: none !important;
  }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.