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

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

Home Forums Support Generate Before Logo Hook will not go full width

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1636378
    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

    #1636440
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1637478
    Jean

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

    #1637514
    Leo
    Staff
    Customer Support
    #1637539
    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!!

    #1637659
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1637687
    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

    #1637701
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1638735
    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

    #1638921
    Ying
    Staff
    Customer Support

    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 🙂

    #1639843
    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.

    #1639847
    Ying
    Staff
    Customer Support

    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!

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