[Resolved] Header element Merge with content will not work

[Len]

I am trying to create a header element for a page hero, but the header will not merge.

In my testing website it works, with the page hero element outside the header when I look at the code inspector.
In a copy of a live website, I cannot get it to merge at all, with “merge with content” set to Merge.
The background image is displayed on the page as per page rules, as is the overlay, and parallax works.
I have tried variations of the page hero settings, no different.
I have disabled the Litespeed cache plugin, and a number of other plugins – no change.
The mix of plugins is very similar on both websites.
There is nothing obviously wrong in the GOogle Chrome inspector console.

[Ying]

Hi Len,

We need to see the site to determine what the cause is.

Can you share the access to your site?

[Len]

Website access provided.

[Ying]

Hi Len,

I tried login, but it says the user name or pw is incorrect, can you check?

Let me know!

[Len]

Ying
See private message for login details.
LenW

[Ying]

Ah the link you provided in your earlier reply was not correct, I can log in now.

The merge doesn’t work is because the site’s HTML structure is changed by 2 hook elements.

In the below screenshot, there’s a site wrapper element which is not from the default GP template.
https://www.screencast.com/t/9UO1uisCq

You will need to remove the 2 hook element: Site Wrapper End and Site Wrapper Start

But this might change the look of your site, so it’s your call.

[Len]

Ying

I want a shadow around the whole site hence the 2 hooks, and I got that from the GP forum which had your advice.

How do I do both please, this is part of a specific design brief I am working to.

LenW

[Ying]

I want a shadow around the whole site

The 2 hooks are wrapping the header area not the whole site, what was the CSS you added for the shadow?

[Len]

Ying

The 2 hooks are:
generate_before_header – with

generate_after_footer – with

This div is around the whole site from top of header to bottom of the footer.
CSS is:
.site-wrapper {
box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}

If you look at other pages, it works as expected. I have excluded the front page from these 2 hooks for now to allow the Hero element to work.

LenW

[Fernando]

Hi Len,

Where should the Box Shadow be? Is it for the header? If so, try this instead:

.header-wrap {
box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}

[Len]

Fernando

No, I need the box shadow around the whole website: header, content and footer – as I said in my initial post.

There isn’t a container for around the whole website, hence why I added a container using the 2 hooks as suggested in the GP forum/support. This then broke the hero front page.

I need a way to get a shadow around the whole front page, and the front page have a hero banner merged with the header.

LenW

[Fernando]

I checked your Shop page, and the box-shadow only appears after the footer.

Adding the box-shadow to the site footer should have the same effect as adding it to a “site-wrapper”.

Example code:

.site-footer.grid-container.grid-parent {
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}

Does this work?

[Len]

Fernaodo

The shadow is around the whole website box on the shop page, I am not sure what you are seeing.

I think you have mis-understood. I need the shadow around all 4 sides of the website, which is contained.
The site-wrapper added using the hook allows for this – and is around the full shop page.

I don’t understand how the shadow just around the footer will have the same effect as around the whole website. I have added your CSS and the shadow on the home page is just the footer – not the rest of the website.

The site wrapper hooks are turned off for the home page.

I still need to know how to get a shadow around the WHOLE website AND have a Hero front page with merged header for the Hero element.

LenW

[Ying]

Can you try this:

1. Remove the front page from the exclusion in the location of the site wrapper hook elements.

2. Set the priority of the site wrapper starter element to 0.

It should work with your original CSS, let me know!

[Len]

Ying, yes that’s sorted it: got both Hero merge and shadow no on home page.
Thanks.
LenW

[Author]

Posts