WooCommerce Product Pages

Support
#1

Okay so on my product pages my menu is hovering on top of content. How do I fix this? See Pics.

#2

Hi There,

Please find this custom CSS:

.x-masthead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

And change to this:

.home .x-masthead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Hope it helps :slight_smile:

#3

Okay were would I find that in the Custom CSS and I only want this to apply to the one header. Not my main header also I am using Pro.

#4

Hi,

Since you are using PRO Header kindly do the following.

Set your Bar Initial Position to Relative in your SHOP Header

Thanks

#5

I do have the Header set to Relative

#6

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

#7

Just added the secure note

#8

Hi,

Thanks for providing your login.

I can see you are setting a fix height for your bars but that the height youa re setting is lower than your revslider height and that is causing issues.

Try to set the height of your bars to auto or set height of your second bar the same as your revslider height.

Hope that helps

#9

I actually had another thread open about the rev slider issue and that was fixed through that thread. I actually have an issue with the header being on top of woocommerce products see new pic. If you read the above portion of this thread you will see that is the main issue for this thread is for some reason Woocomerce is like not recognizing the pro headers and is pushing content all the way to the top of the web page up under the header. Also here is the other link for my thread on my Slider revolution issues. https://theme.co/apex/forum/t/re-slider-revolution-on-posts/31284

#10

Hi There,

I did state on that thread what was causing the issue (about why the content is behind the header), please update your custom CSS to this:


@media (min-width: 980px) {
	body:not(.single-product) .x-masthead {
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 right: 0; 
	}
}

Hope it helps,
Cheers!

#11

Even after adding that custom CSS this is what I am still getting.

#12

Hi There,

Please update the previous CSS to this:

@media (min-width: 980px) {
	.single-product .x-masthead,
	.tax-product_cat .x-masthead {
		position: relative;
	}
}

Hope it helps :slight_smile:

#13

That did the trick!! Thanks!

1 Like
#14