Changing header on mobile

[PhilBlackmore]

Hello,

I have weaver xtreme plus.

I’d like to change the header image on my site for mobile devices.

I understand that I have to hide the header image in the header image options, and then specify a new header elsewhere. I’m not sure how to do the second part.

I found this:

So to answer your original question, you can hide the standard Header image on mobile using Main options > Header > Header Image > Hide Header image drop down list, then insert the mobile header image in an insertion area next to it like Header HTML placed inside a [show_if device='mobile'] shortcode

I’m new to website designing, so if there is anywhere this is described in laymans terms that would be very helpful!

Thank you for your help.

 

[scrambler]

Always include a link to your site so we can be sure of what is in your header right now, or else what we tell you may not quite fit your configuration.

Without having seen the site, and assuming you are not using the Header HTML area right now, you could do the following.

In Main Options > HEader > Header Image > Hide header Image, select Hide: Phones + tablets, so the standard header image does not show on mobile.

Then in Main Options > HEader > Header HTML > Header HTML BG CSS+ box type the rule below

{} #branding %selector% {display:block;} #branding %selector% img {display:block;}

Then in Main Options > HEader > Header HTML > Hide Area, Select Hide: Desktop So the mobile image does not show on desktop

Finally, in Main Options > HEader > Header HTML >HEader HTML COntent box, type the code for the mobile header image  like below

<img src=”MobileHeaderImageUrl” />

Using the Full URL of the image to use

[PhilBlackmore]

That worked great.

Thank you very much 🙂

[Alergic]

I added the first bolded rule, and after a few months of delay to post a question, the mobile header image resize also on browser resize. Not resizing occurs only on Firefox and SeaMonkey.

But it displays fine anyway  on mobile test sites.

Thx for this rule 😉 Maybe it should be added to help page.

[scrambler]

I have added that in my latest tutorial.

http://forum.weavertheme.com/discussion/11685/weaver-xtreme-tips-and-tutorial-part-6

if the image does not resize on some browsers, it may need a max-width:100% and or a width:100%.

Try adding it to the image tag

<img src=”MobileHeaderImageUrl” style=”max-width:100%;”/>

or you can add it to the rule

{} #branding %selector% {display:block;} #branding %selector% img {display:block;max-width:100%;}

report back what fixes the issue so I can incorporate in the tutorial

[Alergic]

The problem with not resizing was before using your first bolded rule. Now everything seems to work fine on every browser, thanks.

[Author]

Posts