Hide OR Remove Header Image On Mobile Devices

  • Hi, On mobile devices, the header image of my website takes up the whole screen. Therefore for mobile devices I’d like to hide the header image so viewers can see my website clearly in their devices.

    In Appearance => Customize => Additional CSS I have added this code but Menus was also disappeared alongwith header image:

    @media only screen and (max-width: 768px)
    {.site-header { display: none !important; }
    }

    So what does the CSS need to be to hide the header image for mobiles please (making sure the menu buttons will display properly).

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Add this to the “Additional CSS”:

    
.fib-image {
    display: none;
}

@media screen and (min-width: 720px) {
    .fib-image {
        display: block;
    }
}
    Thread Starter smsjaipur

    (@smsjaipur)

    @anevins Thanks, but it not working. I have added given code in additional CSS, but now the header image is displaying on every page.

    I am using BHARAT THEME.

    Thread Starter smsjaipur

    (@smsjaipur)

    One more thing, featured image disappeared, but main header image banner is displaying

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I got confused between your Feature image and Header image. Try this instead:

    
.logo-image {
    display: none;
}

@media screen and (min-width: 720px) {
    .logo-image {
        display: block;
    }
}
    Thread Starter smsjaipur

    (@smsjaipur)

    Wow boss, it’s working for homepage.
    My logo header disappeared in mobile devices.
    But it still displaying in other inner pages. Please guide.
    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your logo disappeared before I did anything, sounds like you just need to remove my code to explore that.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Hide OR Remove Header Image On Mobile Devices’ is closed to new replies.