How do I show the Header Image on the Mobile version?

  • Unknown's avatar
    crossfitmuswellbrook · Member ·

    When I view this website on a mobile device the Header Image does not show. Because this is an important part of my site I really need it to load on the mobile version, as well as the main site.

    How can I get the header image, which loads a large random image on the homepage, to be seen on mobile devices?

    Thanks in advance.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, the theme you are using, Twenty Eleven, is a responsive width theme that adjusts to work on all browser widths and devices, clear down to the screen size of a smartphone.

    Go to Appearance > Mobile in your dashboard and turn off the mobile theme and save and then view your site and you will see the header and what you see will look very similar to what you see on a desktop system.

  • Unknown's avatar
    crossfitmuswellbrook · Member ·

    Thanks for responding. I was hoping to use the collapsed menu of the mobile theme because the responsive horizontal menu looks awkward. That’s why I was hoping to simply add the header image to the mobile theme. I shall contemplate my options a bit more…

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, I see. What you could do would be to put the header image into #branding and then add your logo image into #site-title instead of #branding. This would be a start.

    .mobile-theme #branding {
background: url("http://crossfitmuswellbrook.files.wordpress.com/2014/03/cropped-mg_0157.jpg") no-repeat scroll top center;
background-size: contain;
margin-top: 200px;
]

    You would have to move the image down and make room for your logo, and there are some kinks to work out to get the header area to resize and not leave a bunch of extra space below the image. The 200px top margin was just a guess.

  • The topic ‘How do I show the Header Image on the Mobile version?’ is closed to new replies.