Support » Themes and Templates » How may I hide header with css code so it displays in mobile but not in desktop

  • Hi — not an expert with coding, but little by little starting to get the hang of using CSS code with WordPress. But assume I’m fairly dense with coding and have probably not always done things in the most efficient way.

    But… I definitely got the message that I should be working from a child theme, and I am, in fact, currently working with 2 child themes!

    I first created a child theme (“twentyeleven-child”) where I emulated the look of a friend/client’s website and created a blog which is acceptably seamless with her site. Played with divs in the header to get it looking just the way I wanted it — to copy the look of site. Very proud. Until I looked at my phone, and it looked crappy. Bit of searching…. and I added the “Any Mobile Theme” plug in. Brilliant! Created 2nd child theme — “twentyeleven-mobile”.

    Except for one problem. I had removed the header image for my desktop child version that was working so great, but I actually do want a header banner for the mobile child theme. To include a banner as a div in the mobile child version header.php file mucks with the natural width of the blog (doesn’t fill the screen from left to right and looks bad) on the phone and seems to be a bad solution.

    So the simplest fix to this seems to be to include the header banner with the desktop child theme (so that it then displays as I want on the mobile version) and then to find a way to hide it (with css or in a php file?) in that same desktop child theme. (So that it displays for mobile and his hidden for desktop.)

    In the current incarnation of site, as a way of clearly illustrating problem, I am displaying the header in question in a navy blue color, so you can easily pick out the header I need to hide for “twentyeleven-child” and to keep displaying for mobile. Here’s site:

    http://www.blog.throwingfruit.com

    After more searching I thought I’d found the answer, and added this in the style.css in the original child theme ….

    #header { display: none; }

    Didn’t work. More searching. Then I did this…

    #branding {
    	display: none;
    	border-top: 0px solid #000;
    	padding-bottom: 10px;
    	position: relative;
    	z-index: 9999;
    }

    And of course that kinda worked, but it took away everything in the header, including those beautiful div links I spent so much time on!

    I feel like maybe the answer is in the header.php file?

    You might say, “Why don’t you just go to Appearance>Header> and click “Remove Header Image”? Well, I tried that and suddenly the header disappears for the mobile version.

    So, to sum up: I want header to display for the “twentyeleven-mobile” and not to display for the “twentyeleven-child”. The “child” version will be the active theme, and mobile devices will be directed to “mobile” child theme by the “Any Mobile Theme” plug-in. I’m hoping that if I can hide the header jpg in the child theme then that the extra space will also automatically tighten up.

    Hope I’ve explained clearly. Thanks so much!

  • The topic ‘How may I hide header with css code so it displays in mobile but not in desktop’ is closed to new replies.