• I have 2 sites
    http://www.geminithermohvac.com
    http://www.geminifloors.com

    The theme offers the option to use a header image or logo image in the header. Currently I am using a header image of 1180 x 100px. Problem is that on mobile devices it’s too small to read scaled down and doesn’t look right. I see some sights that display what appears to be a logo image on mobile. Isn’t there a plugin to display a header image on desktop and a logo image for mobile ? Isn’t this an issue for any WP site using a header image ?

    The Genesis Responsive Header plugin seems to do exactly this but it’s only for Genesis themes. You can add a different image for 3 different screen sizes. Any WordPress plugin that does this sort of thing ? I have searched alot but cannot find any solution for this.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • It is absolutely possible, however requires coding experience. If your theme does not work as you would like it, you should try and find a plugin that might help or inquire with the theme author on how you can implement this.

    ***oops, wrong topic 🙂

    @madhavadasa

    There are three or four ways you can fix this. I will focus on the easiest methods below/

    1- Don’t use an image with text in it. This is a lot easier said than done, but the benefits are justifiable. There many reasons to opt for using CSS and html for any text element.

    2- Have both the logo and the header image on the page but use CSS to hide one of them depending on the screen size.

    Let me know which option sounds like what you want to do and I can expand further.

    Thread Starter madhavadasa

    (@madhavadasa)

    If you could expand on option #2, would appreciate thanks.

    “2- Have both the logo and the header image on the page but use CSS to hide one of them depending on the screen size.”

    @madhavadasa

    1- Find the location of the header image in your child-theme.

    In you case it’s something like this:

    Image 1

    2- Either remove or comment out the current header. (make sure you have backups)

    3- Add your images. Both the logo for mobile and the text header for desktop.

    4- Add classes to the images to identify them.

    You want to end up with something like this:

    Image 2

    5- Add the following CSS code to your stylesheet:

    .big-header,
    .small-header {
      max-width: 100%;
      margin: 0 auto;
    }
    
    @media (max-width: 800px) {
      .big-header {
        display: none
      }
      .small-header {
        display: block
      }
    }
    
    @media (min-width: 800px) {
      .big-header {
        display: block
      }
      .small-header {
        display: none
      }
    }
    

    What this does is check for the screen size. If the screen size is bigger than 800px (your theme’s current cutoff point, it shows the small header. If the screen is bigger that 800px, it shows the large header.

    6- Check the results and modify according to your needs.

    Here’s a JsFiddle for reference

    Let me know if you need more help.

    Thread Starter madhavadasa

    (@madhavadasa)

    Thank you for the help. I will need some more info.

    “1- Find the location of the header image in your child-theme.”
    child theme ? the child theme doesn’t have this line

    “2- Either remove or comment out the current header. (make sure you have backups)
    How to comment out ? by putting /* in front and */ after ?

    “3- Add your images. Both the logo for mobile and the text header for desktop.”
    not sure where or how to add the images

    “4- Add classes to the images to identify them.”
    not sure about how to do this either

    “5- Add the following CSS code to your stylesheet:
    stylesheet…do you mean the child theme ?

    I have no knowledge of code, I am just familiar with adding code snippets to the child theme. In this case the theme has a custom CSS box which I use instead.

    Is it just a matter of adding the correct code to the child theme (or custom CSS box) ? I assume the code would need the URL’s for both images. Possible you could give the complete code (with example url’s if needed) ? Thanks.

    Thread Starter madhavadasa

    (@madhavadasa)

    I got code from my theme developer that works great. Don’t know if it works for all themes (mine is Tempera).

    /* hide header on mobile */

    @media (max-width: 799px) {
    #bg_image { display: none; }
    }

    /* hide logo on desktop */

    @media (min-width: 800px) {
    body a#logo { display: none; }
    }
    @media (max-width: 799px) {
    body #branding #bg_image + #header-container { position: static; }
    a#logo { text-align: center; }
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Possible to have a header for desktops AND mobile ?’ is closed to new replies.