#50334 Overlay issues with Header not behaving (or page margin paddings not behaving).

Landing Forums JupiterX WordPress Theme Overlay issues with Header not behaving (or page margin paddings not behaving).

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Phil Parker

    Having set the header (customizer > Header) to Overlap Content – this has now created issues on almost all pages such as:

    My Account: Content now overlaps header – https://tinyurl.com/tzwrm7n

    Store page: Header is not overlapping content – https://tinyurl.com/rw63gaw – there is still a black space behind the navigation (i would increase the padding in the first section to allow the navigation to site cleanly on the bg image of that section)
    (NB: this page is now a custom Jet WooBuilder Template overriding the default woocommerce store page).

    Product page: content overlaps with header – https://tinyurl.com/rw63gaw
    This is a standard woocommerce product template. – same thing if I use a custom jet woo product page

    It’s the same pretty much for all pages bar the home page which is the only page displaying correctly, now the Header is set to overlay content.

    Perhaps you can help me understand what else I have not done here?

    Thank you again I do very much appreciate the support.

    Amir Rather Support Team

    In this case, it is better to Enable the Overlap Content on the Home Page only see https://themes.artbees.net/docs/overriding-theme-customizations-inside-the-pages/

    and not for the whole site.


    Phil Parker

    Hi Amir

    I have done this before and tried it.

    I keep receiving conflicting advice from you guys.

    What I really need is some concrete support from you as to how to resolve these issues which are affecting the site, and for me to have to keep using CSS hacks to correct it.


    Alexander Hutsol Support Team



    Sorry for a delay.

    Could you please clarify for which pages you want to have the header overlapping the content? Is it for the whole site and disable the option for several pages only?

    Can you share these pages links?


    Much appreciated.



    Phil Parker

    Hello <span class=”bbp-author-name”>Alexander</span>

    Thanks for getting back to me, but I am now going round in circles with support on this one which is a little frustrating.

    So what I have built is essentially:

    One page website with a store.

    The home page – is displaying as it should, with the nav as an overlay on the page.

    The menu states though are all showing as active except the store.

    Support gave me some .css to fix this on staging, https://tinyurl.com/whdwsjh
    But since going live, all the home page anchors show as active – which is odd as the .css is still the same as staging.

    Store and Product pages
    This has been a real issue, in so far as the default woocommerce templates had the menu overlaying the content, and as they are woo template pages, there is now way to set the page controls up as, unlike normal pages they do not display.

    So, as a workaround, I created Jet Woobuilder templates for the Store and Product Pages.
    However, that’s not worked, on the store page, the menu does not overlay the content – https://staging1.puritycoffeeco.com/store/
    Like it does on the home page.

    Interestingly though I managed to do so on the product page template – but it is not perfect, in the template, at the top there is a 25px margin – so it’s not completely filling the page https://staging1.puritycoffeeco.com/product/purity-hemp-coffee/

    Setting the section on this page to full-width or boxed does not make a difference the margin still remains.

    So it’s these frustrating little things which keep needing CSS hacks to sort out.

    Can you please help me shed some light on what and how to resolve these, everything is updated to the latest versions.





    Tatyana Hutsol Support Team



    1. Can you provide access to the live site to check the issue with the menu?
    2. You had padding-top set to 15rem in Product Archive settings in Customizer https://take.ms/r31gN . I deleted it and now the header is overlapping the content on the Store page https://take.ms/rDk74 . Please check.
    3. I added this code in Jupiter X > Customize > Additional CSS and the black bar was removed on a single product page:
      .jupiterx-main-content {
      padding: 0;

    Thank you.


Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic. Login