Return to previous page

Header overlaps the content - by ygayle - on WordPress WooCommerce support

This topic has 9 replies, 2 voices, and was last updated 7 years ago ago by Olga Barlow

ygayle

Participant

October 20, 2017 at 18:08

Hi there,

I’ve purchased your XStore theme and, for the most part, I’m pretty satisfied with it. However, I’ve run into an issue.

I’m currently using the “Variant Xstore” header type and the “Header overlaps the content” is set to on. I really like this setting as it allows me to show my menu in white font over the header images. This is great! However, on the Shop and Product pages, I’ve discovered a couple of issues.

1) The white menu fonts on top of the white background make them undiscernable. Yes, I could change the colour of the font but it would take away from the look on my main pages, where the header is transparent.

2) Specifically, the woocommerce shop and product pages have no padding at the top for the header. This means the product image and description start right at the top, underneath the menu. Being that it’s white on white, it basically looks like I have no header to begin with.

+++++++++++++++++++

I’ve only been able to find 2 options that seem to address this issue:

1) To turn on the “Breadcrumbs.” However, in doing this, it shifts all the content down and strecthes the header to about 300-400px in height. While I don’t mind this on the product or shop page, I definitely do not like this look on my main pages.

2) If, under the header settings I choose not to allow the header to overlap the content, and choose a colour for the header background, this definitely eliminates the white font on white background issue, and pushes the content down so that it looks like I actually have a header, but it also now adds a header with a colour and menu “above” my header images on my main page, instead of overlapping the header with a transparent background, so that the menu floats over the image and looks really nice.

+++++++++++++++++++++++

I’m looking for a way to be able to have the theme set to allow a transparent background on my main pages, but a non-transparent background on 2 woocommerce pages (shop & product pages).

The transparent header is a great feature. However, some of us are going to want to use white font colours in our menus based on the background images. This creates a problem on white pages where we cannot designate a background header image.

Looking forward to a solution.

Thanks,
Yohan

#175655 Copied Theme version: Version 1.0.16 WooCommerce version: Version 3.2.1

8 Answers

ygayle

Participant

October 20, 2017 at 18:13

To correct one of my last paragraphs,

“I’m looking for a way to be able to have the theme set to allow a transparent header

background on my main pages, but a non-transparent header

background on 2 woocommerce pages (shop & product pages).

#175656 Copied

ygayle

Participant

October 20, 2017 at 18:26

One more thing…(please see the private content area).

Please, contact administrator
for this information.

#175657 Copied

Olga Barlow

Support staff

October 23, 2017 at 10:55

Hello,

1), 2) Disable header overlap option and change header text color at theme options. It will fix the problem on shop and product pages. For those pages, where you need to keep these options enabled, go to Pages > edit page (For example front page) and scroll down to 8theme Layout options > enable header overlap option and change the header text color to white.

Also, you can enable/disable breadcrumbs for the separate pages via these layout settings.
If you want to change the breadcrumbs height go to Theme Options > Breadcrumbs and change the top/bottom paddings.

3) Go to Appearance > Widgets > remove Static block widget from Below the products widget area.

Regards

#175760 Copied

ygayle

Participant

October 26, 2017 at 00:58

Sorry for the late reply. My web host was having server issues.

So, I did as instructed and disabled “Header Overlap” in the settings and tried to enable it individually on my homepage and it’s not working. Do you need me to provide you with login credentials? Please advise.

Thanks,
Yohan

#176106 Copied

Olga Barlow

Support staff

October 26, 2017 at 13:07

Hello,

Yes, it would be perfect. I’ll do all the necessary changes and then inform you what I changed.

Regards

#176156 Copied

ygayle

Participant

October 26, 2017 at 14:08

Hi Olga,

Please see the private content area below for your login credentials.

Yohan

Please, contact administrator
for this information.

#176162 Copied

ygayle

Participant

October 26, 2017 at 15:00

While you’re looking at my site, if you wouldn’t mind, could you also look at the “Search” function? This is actually my second time installing the theme from scratch and when, under the “Header Settings” section I set the “Enable search form in” to DISABLE, the search form still appears on certain pages.

For example:

It does not show on the homepage, but it is showing on my privacy page.

http://www.imakemusic.ca/privacy-policy/

Lastly, I’m noticing some weird spaces between content, about 10-15px. You can see it on the same privacy policy page, between the header and the first row that shows the background image with the lock.

You can also see it on the homepage, underneath the first row with the background picture of the camera and lady, and the footer.

Maybe it’s some type of padding that I may have missed somewhere, but I do not have any spacer rows inserted. Please let me know if I’m missing something or doing something wrong.

Thanks,
Yohan

#176168 Copied

Olga Barlow

Support staff

October 26, 2017 at 16:04

Hello,

1) Your header overlaps the content but because of the bg color you thought that it’s not. We don’t have the option to make header bg transparent for the page that’s why I have added custom code to change it http://prntscr.com/h2blok

2) It’s not the header search, it’s the search from the sidebar. Just disable sidebar at the page settings.

3) It’s default margin between header and page content. If you don’t need it just add the -30px for the top margin of the first row.

Check your pages now.

Regards

#176178 Copied
Tagged: best selling, header, overlaps content, themes, woocommerce
Viewing 9 results - 1 through 9 (of 9 total)