Wire-background same as GeneratePress site

Hi Adrien,

Can you link me to the site you are working on? You can use the private info field.

And have you finished the 4 steps from this topic? https://generatepress.com/forums/topic/grid-like-background/#post-2003323

Let me know :)

Hello Ying ;-) Yes I have completed all steps.

What i've noticed are the following:

1/ My nav menu color changed to a light white instead of being a merged header (through a header element)
2/ The wire frame is not visible on any of the below containers except if for each container I add the class grid-background.
3/ Below my footer appeared a big gap showing the wireframe.

Thanks again for all your help.

1. Disable the merge feature of the header element.

2. Remove this CSS:

body > *:not(.fixed-background) {
    position: relative;
    z-index: 2;
}

Dear Ying, Im very thankful and happy. It worked perfectly. I just have a few issues Id like, when you have the time, your advice on.

I made this quick video to show you : https://www.awesomescreenshot.com/video/7744681?key=a318f280f42453f2fe468ec619bb4184

1/ My logo and some other stuff were not clickable so I checked GP Theme and entered this into my style.css.
Was this correct? I still have some button inside container on my homepage that are not clickable. Should I set z-index: 2 manually for each container when this occurs? Or should I set a Global style container with rule z-index: 2; ?

.site-logo {
z-index: 5;
}
.gb-container:not(.grid-background)>.gb-inside-container, body:not(.full-width-content) .site-main {
z-index: 2;
}

2/ I have an issue with responsiveness. When Im go on mobile and table the wireframe does not fit the whole page to only 1 dashed line (mobile) or 3 (on tablet) are showing.
I tried to inspect GP website but could not find the CSS rule to make the wireframe responsive.

3/ On mobile and tablet my nav bar shows in light white instead of the color set on my customizer.

4/ I struggle to understand how GP hero banner is set to full height. Seems it's not set with vh: 100. I tried to replicate as much as I could the settings of GP website but my hero banner isnt showing full height.

Appreciate all your help. Have a great day ;-)

1. I think your CSS is pretty accurate :) So keep it!

2. You can add this CSS for responsiveness.

@media (max-width: 1000px){
    .grid-background:after, .grid-background:before {
        width: 25%;
    }
}

3. You are using the Mobile header, it uses the background color set for the primary navigation.
Looking at your site, I don't think a mobile header is needed. You can disable it at customizer > layout > header.

4. GP's hero is not set to full height, it's just happened to be the full height with its content and paddings. As you can see, if I shrink the mobile phone image, it's no longer full height.
https://www.screencast.com/t/OiYBYLPRtQq

If you want, you can try this CSS, 115px is your current site header height on desktop:

@media (min-width: 769px) {
    .gb-container.container-hero {
        height: calc( 100vh - 115px);
    }
}

Dear Ying,

You're incredible! Each and every instruction worked like a charm. Again a big big thank you for this incredible support and never giving up on me.
I found a way thank you. Just made a donation to GP ;-) We may now close this topic.

Thank you so much for the donation, that's very kind of you!

It's really our pleasure to be helpful :)

Oops I need to reopen this ticket Ying ;-)
I have 2 issues that Ive discovered lately with the Wireframe.

Num 1. On some page such as the one I've added into the secret notes, I can select the text at the bottom of the page (to copy paste it). For example the table called "Accents Francais".

Num 2. On my homepage at the very end, I have 3 images with a difference effect within each image container. You will notice that images are blinking heavily.

Appreciate your help.

Let's try change this CSS:

.gb-container:not(.grid-background)>.gb-inside-container, body:not(.full-width-content) .site-main {
    z-index: 2;
}

to:

.gb-container:not(.grid-background)>.gb-inside-container, body:not(.full-width-content) .site-main {
    z-index: 2;
    position: relative;
}

Let me know if this helps :)

Dear Ying, It worked but it's now hidding the dashed wire frame.

How can I keep the wire frame while allowing the text to be selected?

Appreciate your help.

Hi there,

add the pointer-events: none; property to this CSS:

.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    pointer-events: none; /* Add this */
}

Thanks a lot David! It did the trick ;-)

You're welcome