WooCommerce Shop Header responsive background image losing its transparency

miweb777

Hi,

I have been racking my brain for hours trying to find the correct CSS but to no avail.

I have a website in development mode:

http://d17820418.i94.quadrahosting.com.au/shop/

The problem is when I view this on a mobile phone (or under 768px) the dark brown Wrapper/Content fills the header where the Logo is.

ALL of the other pages are fine. Just the SHOP pages have this problem.

For instance, if you view this page (or any other non-shop page) on the mobile phone the header transparency remains:

http://d17820418.i94.quadrahosting.com.au/

Can you show me the CSS so the WooCommerce Shop pages/products where the #Top_bar retains its transparency when viewed on the mobile?

Thanks in advance.

Michael.

Pablo

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

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

From my previous comment....

https://prntscr.com/po8ajt

Bryan

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

Wow. It worked!

Something so simple right under my eyes I missed.

Thankyou Bryan.