[Resolved] Generate Before Logo Hook will not go full width

[Jean]

Hi!
I am creating my own “generate before logo hook” in Elements using Generate Blocks.
This hook contains a short menu, social icons and search bar.
I have set all of the widths to be “full width” – including the container.

However, when I go to the WordPress Appearance- Customize Page, the hook is not full width and has been smashed into the center. On the Appearance- Customize Page, I have everything set to full width as well. However, since my logo needs to be centered, I have the header alignment customization set to “Centered.” This has moved everything to the center and my hook is not taking up the width like how I made it in Elements using a full width container.

Please advise and thank you!
Jean

[Elvin]

Hi,

I’m not sure I get the whole picture.

Can you link us to the site in question? So we could check for the best solution to address the issue.

You can use the private information text field to provide the site details. Thank you.

Note: We don’t offer support via phone, unfortunately.

[Jean]

Thank you for the reply. Could I get an email address so I can create a new user for you?

[Leo]

You can use support@generatepress.com

[Jean]

Thank you!
-I would like my “generate before logo hook” in elements to not be smashed together in the middle- I would like it to look more like the widgets I have in place in the top bar where it takes the full width of the page. (The top bar is just an experiment and that is why it is still there).
-I would like my search bar to not have a border around it

Thank you very much for your help with this!!

[Elvin]

Thank you for providing the details.

-I would like my “generate before logo hook” in elements to not be smashed together in the middle- I would like it to look more like the widgets I have in place in the top bar where it takes the full width of the page. (The top bar is just an experiment and that is why it is still there).

For starters, Let’s try to use as less containers as possible.

You could simply use a single Grid Block instead of multiple column and container blocks.

Your Block container seems to be structured like this – https://share.getcloudapp.com/BluYyJlj – which can be a pain to manage.

With GenerateBlock’s Grid Block, you can simplify it to this:
https://share.getcloudapp.com/WnuB4dOx

And this is saves us some time because you don’t have to write CSS “un-squish” the block contents because the Grid Block automatically goes 100% width of its container.

-I would like my search bar to not have a border around it

We can remove the default border WordPress adds by adding this CSS:

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    border: none;
}

[Jean]

Elvin,
Thank you! So I redid the hook using Grid Blocks, and it is still smashed. Is there something I’m doing wrong?
Also, where do I put the CSS to remove the search box border? 🙂

Thanks again,
Jean

[Elvin]

In that case, you can add a CSS class fullwidth-grid to the grid block and add this CSS:

.fullwidth-grid {
    width: 100%;
}

Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

[Jean]

Thank you!
I have Simple CSS and added the CSS to the Appearance – Customize Page.
It worked for taking the border off the Search Bar (thanks!!).
But, it did not work for taking the container full width in the hook in elements.
I also tried adding it to the Additional CSS in the element itself, but still no change.

Thanks for your help with this,
Jean

[Ying]

Hi Jean,

Just to make sure you have added the custom CSS class to the grid block that you want it to be full width.

If not, it can be added here:
https://www.screencast.com/t/X2eXv4jVc
Let me know 🙂

[Jean]

Thanks! The screen shots are so helpful.
I figured out the problem. I had my hook as “generate before logo.” I changed it to “generate before header” and it is full width now. Thanks so much.

[Ying]

Hi Jean,

Sorry I didn’t specify previously, there’s no . before the fullwidth-grid when adding it to Additional CSS class(es). Could you try again? Thanks!

[Author]

Posts