Home › Forums › Weaver Xtreme Theme › Changing header on mobile
- This topic has 5 replies, 3 voices, and was last updated 8 years, 2 months ago by
Alergic.
-
AuthorPosts
-
March 19, 2015 at 23:49 UTC - Views: 12 #17489
PhilBlackmore
ParticipantHello,
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'] shortcodeI’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.March 20, 2015 at 00:57 UTC - Views: 4 #20654scrambler
ModeratorAlways 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
March 20, 2015 at 15:18 UTC - Views: 2 #20655PhilBlackmore
ParticipantThat worked great.
Thank you very much 🙂
March 21, 2015 at 00:01 UTC - Views: 3 #20656Alergic
ParticipantI 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.March 21, 2015 at 00:04 UTC - Views: 3 #20657scrambler
ModeratorI 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
March 21, 2015 at 01:34 UTC - Views: 2 #20658Alergic
ParticipantThe problem with not resizing was before using your first bolded rule. Now everything seems to work fine on every browser, thanks.
-
AuthorPosts
- You must be logged in to reply to this topic.