Header background image in handheld menu

  • Resolved lvoh

    (@lvoh)


    3 years ago

    Hello,
    I have problem with the responsive function of Storefront.
    I put a background jpg image in the header at the right size (1950*500).
    For the tablet and smartphone versions, I managed to hide the background and make a logo appear with the additional CSS.
    Only problem, the background appears in handheld menu https://ibb.co/MDMWP5y

    /* Responsive CSS for Header on desktop*/
    @media only screen and (min-width: 1024px) {
    .site-header .custom-logo-link img {
    display: none;
    }
    }
    /* Responsive CSS for Header on mobile*/
    @media only screen and (max-width: 768px) {
    .site-header .custom-logo-link img {
    display: show;
    }
    #masthead.site-header {
    background: none;
    }
    }
    Thanks for your help
    Lvoh

    Woocommerce version 5.9
    Storefront version 3.9.1

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there,

    I’ll help you get started with this by providing basic CSS, but if you need more help after that, our support won’t be able to help you further.

    To remove the background, can you please navigate to Appearance > Customize > Additional CSS and add the following code:

    @media(max-width:1024px){
 header#masthead {
     background: none !important;
 }
}

    Hope it helps!

    Best,

    Thread Starter lvoh

    (@lvoh)

    Hi Amhed,

    Tanks a lot, i was looking for a solution for several days, your css code works.
    I mark this thread resolved.

    See ya !

    lvoh

    You are very welcome. Have a nice day ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header background image in handheld menu’ is closed to new replies.