WooCommerce Shop Header responsive background image losing its transparency

Comments

• Pablo

  October 2019

  Hello Michael,

  The problem is related to your CSS customizations.

  http://prntscr.com/pnygcm

  
  

  After removing that, header gets his transparency.

  thanks
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• miweb777

  October 2019

  Hi,

  
  

  Thanks for the quick reply. This works however ....

  
  

  The problem is the Client wants the darker background like the other non-shop pages.

  http://d17820418.i94.quadrahosting.com.au/about-us/

  
  

  As you can see on the mobile phone the other pages have the dark background and the header remains transparent on the mobile phone.

  
  

  But, in the Shop & Product Pages the header loses its transparency.

  
  

  In fact, when viewing from the mobile phone, the whole #Content section moves up so to keep it down and not overlapping the header area I need to add this CSS also:

  
  

  @media only screen and (max-width: 768px) {

     #Content {

         padding-top: 275px !important;

     } 

    }

  
  

  This problem is only on the Shop & Single Product Pages when < 768px. Everything else is fine.

  
  

  Any ideas?

  
  

  Michael.
• miweb777

  October 2019 edited October 2019

  From my previous comment....

  https://prntscr.com/po8ajt

  
  

  
  
• Bryan

  October 2019

  Your CSS looks fine but use margin-top instead of padding-top, this way the content background will not affect the header.

  cheers
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• miweb777

  October 2019

  Wow. It worked!

  
  

  Something so simple right under my eyes I missed.

  
  

  Thankyou Bryan.