Full responsive header view on mobile

[mrutyunjaya]

Hi, I want to display the full header on small screen as shown in the reference image attached. But in my case the back ground image i am using getting spread (pls refer image exp 2)

I am using following setup. 2400*1600px image backgroung, Size & position: cover, center, Parallax 200%

Appreciate any suggestions to achieve the desired output. Thank you.

[tristup]

Hi Mrutyunjaya,

Thanks for reaching out.
You might have set the size of the background image to cover and that might be the reason behind the problem. I would suggest you reset the size to contain and check if that issue is resolved.

Hope it helps.
Thanks

[mrutyunjaya]

Hi Tristup,

I tried. But it didnt work for me. I have attached details under secure note. Would you mind to replicate the header on smaller screen how it loads here?. (https://joshmotlong.com/)

[prakash_s]

Hello Mrutyunjaya,

I tried to access your site’s dashboard but the given credentials are not working. Please recheck and send us again.

Thanks

[mrutyunjaya]

Hi Prakash,
I have updated new credentials in secure note.

[prakash_s]

Hello Mrutyunjaya,

I would suggest you add a custom class in the Header Bar then add this custom CSS code under Pro—>Theme Option —>CSS

@media(max-width:766.98px){
.custom-background .x-bg-layer-lower-image {
background-size: 100% !important;
}
}

Please feel free to change the custom class name as per your need. Please note that if you change the custom class name then you need to change the class name in the CSS selector as well.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[mrutyunjaya]

Thanks Prakash. The info helped. Jay

[prakash_s]

Hello Mrutyunjaya

Glad that we were able to help. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks