[Resolved] Header background color changed across all pages

Home Forums Support Header background color changed across all pages

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1424552
    Stefan

    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).

    https://prnt.sc/u8qfnk

    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.

    Regards,
    Stefan

    #1424859
    David
    Staff
    Customer Support

    Hi there,

    will this Block be displayed in the same place across your site?

    If so use the Block Element:

    https://docs.generatepress.com/article/block-element-overview/

    You won’t need to use a reusable block in there.
    And we recommend using the GenerateBlocks plugin for building that content:

    https://wordpress.org/plugins/generateblocks/

    #1425301
    Stefan

    Hi David,

    – 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?
    https://prnt.sc/u925y8

    Regards,
    Stefan

    #1425767
    Leo
    Staff
    Customer 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?
    https://docs.generatepress.com/article/page-builder-container/

    If you need the full width layout for all pages, then you can create a layout element for it:
    https://docs.generatepress.com/article/layout-element-overview/#content-1

    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 🙂

    #1435110
    Stefan

    Hi,

    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:
    https://prnt.sc/udltvq

    This is what the header looks like in the visual editor:
    https://prnt.sc/udluvs

    This is what the start here page looks like:
    https://prnt.sc/udlv5f

    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.
    https://prnt.sc/udlx17

    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.

    Regards,
    Stefan

    #1435185
    David
    Staff
    Customer Support

    Hi there,

    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_header hook 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.

    #1435504
    Stefan

    Hi David,

    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/udq1nu

    #1435524
    Leo
    Staff
    Customer Support

    Can you guide me to the page where the issue can be seen?

    I checked the URL you’ve provided in the original topic but don’t see GB there.

    Let me know 🙂

    #1435718
    Stefan

    Hi,

    This is the link:

    https://www.lifestyledemocracy.com/

    Please let me know if there is anything else.

    #1435727
    Stefan

    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?

    #1435881
    Leo
    Staff
    Customer Support

    Let’s take care of one issue at the time.

    The full width setting should be in the container block settings:
    https://postimg.cc/56m9Y3W5

    Do you see that?

    #1436071
    Stefan

    Hi Leo,

    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?
    https://prnt.sc/ue1n2z

    Regards,
    Stefan

    #1436076
    Leo
    Staff
    Customer Support

    Which page should I be looking at now?

    I don’t see GB in this one:
    https://www.lifestyledemocracy.com/

    #1436962
    Stefan

    Hi Leo,

    Yes, we are talking about that website: http://www.lifestyledemocracy.com.
    If that is not GB, then I don’t know what I am doing 🙂

    The thing I want to resolve now is the spacing between the blue squares.
    https://prnt.sc/ueehar

    Looking forward to your feedback.

    Regards,
    Stefan

    #1437298
    Elvin
    Customer Support

    Hi Stefan,

    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.
    https://share.getcloudapp.com/9ZuX6k8r

    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.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.