Can the main page header be a slider?

[Bidur]

Well the header menu is working fine when we check from our end. Please confirm it. if you wish to remove the header from mobile menu, you may add the following css inside the additional css field of your customizer;

@media screen and (max-width: 620px) {
 .lavish_head {
    display: none;
 }
}

Thanks!

[blake more]

I tried that code…and now i see why you ssay it is working perfectly — the menu header is fine…it is the header image that is not responsive…it is too big on mobile…if you look at it on a tablet or phone, it cuts off and does not resize…it looks great on a desktop…

i tried the code but it made the entire menu go away…which is definitely not what i would want, as it makes navigation between pages impossible…

so, to be clear… want to remove the header image on mobile/tablet view — or make it responsive…now it just cuts off and looks terrible…is that the lavish_banner instead of the lavish head?

please advise…

also, am i now using the most current theme version 4.1.8? can you tell? as I thought this would fix my mobile display issue

thank you again and again!

[blake more]

still looking for a way to remove the header (not the menu or logo) on mobile…the code you provided above left the header but elimintated the menu and the logo..the opposite of what i am looking for…please assist, and the update to 4.1.8 seemed not to have solved the unresponsive header problem (your theme template says it has to be 2560 x 400, which is what I created and uploaded to the header section of customizer.

thank you

[Bidur]

Hello Blake,

Sorry for the mix-up.
Yes, now your site is succesfully running with the latest version of the theme i.e 4.1.8

The theme clearly recommends you for the 2560 × 150 pixels header image.
Please undo all your changes and add the following css inside the additional css field of your customizer;

@media screen and (max-width: 1024px) {
#la-banner {
    background-size: cover;
    min-height: 268px!important;
 }
}
@media screen and (max-width: 780px) {
#la-banner {
    background-size: cover;
    min-height: 226px!important;
 }
}
@media screen and (max-width: 650px) {
#la-banner {
    background-size: cover;
    min-height: 190px!important;
 }
}
@media screen and (max-width: 550px) {
#la-banner {
    background-size: cover;
    min-height: 146px!important;
 }
}
@media screen and (max-width: 440px) {
#la-banner {
    background-size: cover;
    min-height: 110px!important;
 }
}

Note: you can adjust the screen width and min-height of the image of your own.

Thanks for your patience.

Best Regards,
Bidur

[blake more]

thank you…
since according to my theme customizer the them calls for 2560 x 400 (see attached screenshot), I’m a bit confused by your assertion that the theme “clearly recommends 2560 x 150” — can you please show me where this is in the documentation?

as a result, I did not feel your dimensions would work, so instead, I simply removed the header from mobile and tablet views, and now it know it is: #la-banner

this works, but of course, I would rather have a responsive header…I am really wanting to know how you got the 150 number….(in the screenshot, the “400” value in the “custom header image” box was already there…so i did not add it…in fact, when i tried to eliminate that value, the entire header goes away…

thanks again for your help

Attachments:

You must be logged in to view attached files.

[Bidur]

Hello Blake,

Well our demo recommends to use the header image with 150 pixels header height. You can rather change and add custom header height of your own. Since you have add 400 pixels in your custom header height field it is recommending the same. It is up to you. Is everything working now?

Thanks!
Bidur

[blake more]

strange, but when I opened the customizer, 400 was already entered in the field…perhaps that was left over from before? If at a value of 400, how does this change?

@media screen and (max-width: 1024px) {
#la-banner {
background-size: cover;
min-height: 268px!important;
}
}
@media screen and (max-width: 780px) {
#la-banner {
background-size: cover;
min-height: 226px!important;
}
}
@media screen and (max-width: 650px) {
#la-banner {
background-size: cover;
min-height: 190px!important;
}
}
@media screen and (max-width: 550px) {
#la-banner {
background-size: cover;
min-height: 146px!important;
}
}
@media screen and (max-width: 440px) {
#la-banner {
background-size: cover;
min-height: 110px!important;
}
}

I’m not so good at figuring out media screen ratios!

thank you — getting so close!
blake

[Bidur]

Well the header height works for desktop screen and the media query for responsiveness. Have you tried the above custom css?

Thanks!

[Author]

Posts