Generate Before Logo Hook will not go full width

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.

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

You can use support@generatepress.com

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!!

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;
}

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

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/

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

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

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.

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!