How to Add Space to Top of Shop Home Page

Support
#1

I need to add paragraph spaces to the top of my shop home page, this should be really simple, but I don’t know how to do this, can you help me?

#2

Hi,

I checked your shop page and can see that the header is overlapping the content.

To fix it, please change the css code in Theme Options > CSS that reads

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0px;
}

with this

body.home.x-navbar-fixed-top-active .masthead {
      position:absolute;
      width:100%;
}

Hope that helps

#4

Yeah that really did NOT work, it kind of broke my site, everything on the entire site went to 100% width and it removed all my background colors and images from the site.

I removed the CSS you gave me and put it back the way it was, but the site still did not return to what it was originally. I even cleared the cache and cookies in all my browsers to be sure. It still did not return.

Right now I am doing a restore from a back-up I created just before I did this.

I think a better question would be, how can I get my shop pages to essentially look and function like my blog pages here:

#5

Hello @nazsect,

Thanks for updating the thread.

Please note that Masonry layout is application only for blog and portfolio pages not WooCommerce (Shop) page. However, you can take a look at following thread for some pointers:

Please note that we won’t be able to provide support for custom development work as it falls outside the scope of support we can provide.

Thanks.

#6

I apologize for the confusion, I’m NOT looking for masonry layout.

I just want to push down the content on the page, by adding paragraph spaces to the top of my shop pages, this should be really simple.

As Paul said before the header is overlapping the content. the fix he provided before broke my site and did not work. I should be able to edit the template for this page correct?

If you can direct me to the template for this page OR a fix that only effects the shop pages and NOT my whole site I would really appreciate it.

I assume the shop page should NOT be overlapping with the header so not I’m asking for something that is outside your scope.

#7

Hi again,

We’re sorry for the confusion, to fix the issue just go to Theme Options > Header > NAVBAR > NAVBAR TOP HEIGHT (PX) and input 80 in the field (see screenshot)

Cheers!

1 Like
#8

Definitely helps, now is there anyway, this can only affect the Shopping page(s) and not the rest of my site?

#9

Hi @nazsect,

Not possible, it’s a configuration being applied to the global header and it’s inner container. The only way is adding custom CSS applicable for the shop page. Example, you can add this CSS to your Theme Options > CSS.

.woocommerce.post-type-archive-product .x-navbar-inner,
.woocommerce.post-type-archive-product .x-navbar-wrap {
min-height: 0px !important;
height: 0px  !important;
}

Thanks!

#10

Thanks!! That worked Perfect! Appreciate You Guys!

#11

You’re most welcome.

#12

Another quick question, the code below worked perfect for the front page of the store.

.woocommerce.post-type-archive-product .x-navbar-inner,
.woocommerce.post-type-archive-product .x-navbar-wrap {
min-height: 0px !important;
height: 0px !important;
}

What would be the code to add space for the product pages?

#13

Hi again,

For the single product pages, you can add the following code as well:

.woocommerce.single-product .x-navbar-inner,
.woocommerce.single-product .x-navbar-wrap {
    min-height: 80px !important;
    height: 80px  !important;
}

Let us know how those goes!

#14

Thanks it works! I figured it out just now before I seen your message. For anybody else having this issue, use the codes below.

.woocommerce.post-type-archive-product .x-navbar-inner,
.woocommerce.post-type-archive-product .x-navbar-wrap {
min-height: 80px !important;
height: 80px !important;
}

.woocommerce.product-template-default .x-navbar-inner,
.woocommerce.product-template-default .x-navbar-wrap {
min-height: 80px !important;
height: 80px !important;
}

.woocommerce-cart.page-template-default .x-navbar-inner,
.woocommerce-cart.page-template-default .x-navbar-wrap {
min-height: 80px !important;
height: 80px !important;
}

.woocommerce-checkout.page-template-default .x-navbar-inner,
.woocommerce-checkout.page-template-default .x-navbar-wrap {
min-height: 80px !important;
height: 80px !important;
}

#15

Great News! It’s good to know that it works for you.
If you need anything else we can help you with, don’t hesitate to open another thread.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.