Different header image for mobile view

To whom it may concern:

I am trying to use @media to change the image of the header when our website is viewed on smaller screens. Can you tell me if this is possible?

I will also follow up on the menu views.

Thank you,
David

Hello-

I read through the posts and saw that you added a place to add a smaller image for the header. I have done so; however, that image does not show when the screen is reduced to 320 (even smaller).

Thank you,
David

Dear David,

Could you please share the link to the page in question, so I can take a closer look?

Regards,
Kharis

Hello Kharis,

Here is the link:

http://piusmedianow.com/

Thank you,
David

Hello Kharis,

I have been thinking about this since I submitted this issue… I do have a header.php file in my child theme. It is basically the alizee pro theme header file with some minor additions.

I have noticed on some of my other issues dealing with the styles that if I added ‘!important’ to the code, the code does over-ride the alizee pro theme. Can this be done in the header.php file in my child theme? If so, where should I use that expression?

Thank you,
David

Dear David,

I would like to apologize in advance for the delay.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width: 640px){
  
  .site-header:after{
    background-image: url('http://piusmedianow.com/path/to/your/smaller-header-image.jpg');
  }
  
}

Regards,
Kharis

Hello Kharis,

Thank you!! That worked.

David