Home Forums Weaver Xtreme Theme Changing header on mobile

This topic contains 5 replies, has 3 voices, and was last updated by  Alergic 3 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #17489

    PhilBlackmore
    Participant

    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.
     
    #20654

    scrambler
    Moderator

    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

    #20655

    PhilBlackmore
    Participant

    That worked great.

    Thank you very much 🙂

    #20656

    Alergic
    Participant

    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.
    #20657

    scrambler
    Moderator

    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

    #20658

    Alergic
    Participant

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.