- This topic has 25 replies, 5 voices, and was last updated 1 week, 5 days ago by Tom.
August 30, 2020 at 10:28 pm #1424552Stefan
Hi Generate Press,
I created header pages by creating one re-usable block. I wanted them all to be the same shade of blue as in the top header (please seen screenshot).
The black box was at one point blue and now it has changed to black across all pages. I only have two GP Elements active, one for the Search Page and one for the 404 page. I do not have a special element for the header.
Can you please help me troubleshoot this issue as I cannot seem to locate where to change the color for the re-usable block.
Looking forward to your response.
StefanAugust 31, 2020 at 4:39 am #1424859DavidStaffCustomer Support
will this Block be displayed in the same place across your site?
If so use the Block Element:
You won’t need to use a reusable block in there.
And we recommend using the GenerateBlocks plugin for building that content:August 31, 2020 at 8:39 am #1425301Stefan
– Yes, this Block will be displayed across all pages.
– One more problem. I would like to have 40px padding on all sides of the container. When I do that, I get some space between the Block that I would like to have and the header. Please refer to the screenshot. How do I get rid off it across all pages?
StefanAugust 31, 2020 at 4:14 pm #1425767LeoStaffCustomer Support
David’s suggestion of using GB with block element would definitely be the best method.
The space between the header and content is coming from a few different things.
Can you try using the full width page builder container option first?
If you need the full width layout for all pages, then you can create a layout element for it:
It would work the best for what you are trying to create.
I would again highly recommend GenerateBlocks – should be super helpful for what you are doing 🙂September 8, 2020 at 4:59 am #1435110Stefan
I created a block element (hook) to use as the header but still not working as intended. I tried to activate it on all pages, but it messes things up for me. Is it possible to customize the activation of the hook element to certain pages?
By the way, here’s the problem:
This is the current HTML code of the bugged header:
This is what the header looks like in the visual editor:
This is what the start here page looks like:
The way it’s supposed to look is the black box is supposed to be merged with the top blue box (menu items) and the white space (padding) to be gone.
The issue is not the width, I found ways to solve it, but it’s the padding. In the GeneratePress website settings, I selected 40px of padding, but is there a way to remove this container padding for the top section for the header block I want to create?
I hope you can help with this.
StefanSeptember 8, 2020 at 5:45 am #1435185DavidStaffCustomer Support
First off the spacing issues:
1. The default content container has top padding. So any element placed inside it will be affected by the padding. Use the
after_headerhook in the Block Element as this is outside the content container and will fill full width.
2. Use the GenerateBlocks plugin instead of a Cover Block. This has zero top margin ( unlike the cover block – which is where the other space is coming from ) and the CSS is dynamic so it should render correctly.September 8, 2020 at 8:02 am #1435504Stefan
Thanks for the help. I re-did everything as per your instructions and now it seems to work.
I used GenerateBlocks to create the homepage, but for some reason I cannot find the settings to stretch the block to full width and make the full background blue.
I fixed some and broke another 🙂
Here’s the screenshot with the issue.
https://prnt.sc/udq1nuSeptember 8, 2020 at 8:19 am #1435524LeoStaffCustomer SupportSeptember 8, 2020 at 11:39 am #1435718Stefan
This is the link:
Please let me know if there is anything else.September 8, 2020 at 11:47 am #1435727Stefan
I also noticed that after creating the Block Element Hook, in the mobile version I need to slide to the right to see the rest of the web content. There are a few more pixels on the right that are not shown immediately upon entering the site. I think that Block Element hook (on all pages) is wider than the phone screen width for some reason.
I didn’t have this issue with the previous setup. Can you help me with this as well?September 8, 2020 at 3:15 pm #1435881LeoStaffCustomer SupportSeptember 8, 2020 at 10:17 pm #1436071Stefan
I used the “Grid” block and that’s why I couldn’t find the option. I changed the block to “Container” and it worked. Now, I still have space between the Element: Header Block and the Generate Blocks: Container.
Could you please help me remove the spacing as indicated in the screenshot?
StefanSeptember 8, 2020 at 10:22 pm #1436076LeoStaffCustomer SupportSeptember 9, 2020 at 9:26 am #1436962StefanSeptember 9, 2020 at 2:50 pm #1437298Elvin Customer Support
I’ve checked your site and narrowed down the cause of the white space.
As shown in the video, there’s an empty <p> html tag on your web page.
Perhaps you have a Block Element that inserts a Cover on generate_after_header hook. This block probably has an empty <p> underneath.
Can you check if this is the case? Thanks.
- You must be logged in to reply to this topic.