WooCommerce Category Pages Header Issue

cnatalino · January 2016

I am using the Split, semi transparent header option and it seems that the category archive pages of the woocommerce store are not responding correctly. The navigation and logo are covering the top portion of the category page.

You can see how the top of this page is tucked underneath the site header http://www.cheriisthebomb.com/product-category/granite-goods/ladies/

Thank you for your help!

Albert · January 2016

Hi,

this is the whole sens of being transparent. If this is not what you are looking for, just use another header type.

cnatalino · January 2016

The transparent header (Header > Split Menu Semitransparent) works throughout the site, the only issue I am having is with the category archive pages.

I would actually PREFER to use the Header > Split Menu header option. The issue I am having with that option is that it does not allow our centered logo to show over the other page elements. If you look at the home page currently http://www.cheriisthebomb.com/ you will see that currently the logo is in front of the Revolution slider. On other pages, the logo is in front of the page title bar. We currently have the header set as " Header > Split Menu Semitransparent".

We would love it if there was a way to use "Header > Split Menu" and have the logo come in front of the other page elements as it does with "Header > Split Menu Semitransparent ".

This is the third time I have purchased and used this theme, and I really appreciate the level of support you have always provided. If you can solve this one for me, I will be forever grateful.

This image shows what happens when I change to the "Header > Split Menu" option.

Thanks in advance!

cnatalino · January 2016

Sorry ... here is the image I was referring to above.

Albert · January 2016

But from what we see, the logo is in the front of the content what you can see on http://pasteboard.co/Xh0XKHN.png - so can you send us link to page where logo is behind the content?

cnatalino · January 2016

Yes, you are correct. The logo is in front of the content currently. But you will notice that compared to the screenshot above (posted on jan 20) there are other elements on the page that are hidden behind the menu. See below.

To recap, there are two pieces of info that are important here:
1) I am currently using Header > Split Menu Semitransparent because I want our logo to come on top of page elements like the page title bar and the revolution sliders

2) I would PREFER to use Header > Spilt Menu but I am asking you for help on how to ensure the logo comes in front of the sliders and page title bars. The photo I posted on Jan 20th in my above post shows what happens when I use this header type. You can see that on the homepage, the logo dispappears behind the slider, but on the category archive page it comes in front of the page elements. This leads me to believe it is probably a small css adjustment I need to ensure the logo element comes in front of everything else when using the Header > Split Menu option.

If it makes it easier for you, I can change the site to Header > Split Menu so you can see the issue with the logo falling behind other elements. I have left it as Header > Split Menu Semitransparent since this shows what we are trying to accomplish with the logo.

Just to clarify, the reason I am using Header>Split Menu Semitransparent currently is because of how it handles the logo. I have had to add css to bump the page headers down so they ARE NOT covered by the menu, and this is not ideal.

I believe the best option would be to change header types as you recommended. However it would be so great if you could tell me how to ensure the logo element comes in front of the sliders and page title bars (as it does now).

THANK YOU!!!

Albert · January 2016

If you really want to keep the current header style, all we can suggest is to move the content down with custom css:

body:not(.template-slider) #Content { padding-top: 200px !important; }

However, if this won't work as you wish, we have no other workaround and you need to use different header type.

In reference to page with slider, we did checked it but the logo is in the front of the slider. It does not hide like on presented example what you can see on http://pasteboard.co/XGe7XwF.png

Anyway, if you will switch to Split Menu style, we would be able to have a look on it once again and check if there is anything what we can do to display the logo in the front of the slider.

cnatalino · January 2016

I swapped to Split Menu style header so you can see how the logo drops behind the slider and the page title bars.

It would be so great if you could help me ensure that the logo comes in front of these items!

Homepage where logo falls behind slider: http://www.cheriisthebomb.com/

Page where the logo falls behind page title bar http://www.cheriisthebomb.com/services/

Thank you!!

Albert · January 2016

Ok. So you can put this logo behind the slider and title bar, with the following css:

.header-split #Header .top_bar_left .logo { z-index: 9999 !important; }

cnatalino · January 2016

That did it! You are a genius!!!

Lastly, is there some css I can add to bump down the top elements on the category archive pages?
http://www.cheriisthebomb.com/product-category/granite-goods/ladies/

Albert · January 2016

No, this is unfortunately not possible. What you want to do, requires files customization.

WooCommerce Category Pages Header Issue

Comments