Header Widgets Order

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Whoops! Forgot to add it! Also, where can I leave a review about your support because I'd have to say, I am so so impressed with the level of support for all my questions!

Just to confirm, you are referring to the purple MailChimp widget?

Are you able to add it as a shortcode?

If so using a hook element instead of the header widget would be the best solution:
https://docs.generatepress.com/article/hooks-element-overview/

The generate_after_header hook would be what you need:
https://docs.generatepress.com/article/hooks-visual-guide/

Let me know if this helps :)

You can give us a review here:
https://wordpress.org/support/theme/generatepress/reviews/

We appreciate it!

Hello,

I was able to add the short code hook, however, the mailchimp form is on the the left edge of the page (slightly cut off). Is there a way to add it to the center of the page?

It is also showing on 3 line, but I would like to get it in one line. Is this possible to do?

Thank you,
Sam

Can you link me to the page in question using GP?

Hi Leo,

just coming back to this topic now to fix. I have made the hook live and you can see the form is not centered. I would also love to put it all on one line like how my old site had it.

Thank you,
Sam

Hi Sam,

You can try adding this CSS:

.mc4wp-form-fields {
    display: flex;
    max-width: 1250px;
    margin: 0 auto;
    align-items: center;
}

.mc4wp-form-fields p.memail {
    margin-left: auto;
}

.mc4wp-form-fields p {
    margin: 0;
}

form#mc4wp-form-1 {
    padding: 10px;
}

Hello Elvin,

Where should I be adding this code?

Thank you,
Sam

Hello Elvin,

I added under additional css code. When doing it, it did center the bar, however, on mobile view, it smushed it and cut it off.

Is there something I can do to fix this?

Thanks,
Sam

Where should I be adding this code?

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

The customizer's additional CSS area should work fine.

When doing it, it did center the bar, however, on mobile view, it smushed it and cut it off.

Is there something I can do to fix this?

Can you provide any mockup image of how you want it to be laid out on mobile? So I can improve the CSS writeup based on it. :)

Hello Elvin,

If you open the below link on mobile, this is how I am trying to make it look.

For mobile: Text on top, email in the middle and button below. All being centered.

The desktop version looks fine, although there was no space between the email box and the button. I can enable it so you can see how it looks, please let me know.

Thank you,
Sam

Hi Sam,

We could add a media query to Elvin's CSS, so it only applies to bigger screens, then we add another piece of CSS for mobile:

@media (min-width: 769px) {
    .mc4wp-form-fields {
        display: flex;
        max-width: 1250px;
        margin: 0 auto;
        align-items: center;
    }
    .mc4wp-form-fields p.memail {
        margin-left: auto;
    }
    .mc4wp-form-fields p {
        margin: 0;
    }
    form#mc4wp-form-1 {
        padding: 10px;
    }
}
@media (max-width: 768px) {
    #mc4wp-form-1 .mc4wp-form-fields {
        text-align: center;
    }
}

Let me know :)

Hello Ying,

I've entered in your new code, but on mobile, it is left adjusted instead of centered. Seems like we are getting closer though.

Thank you,
Sam

I'm sorry there was a mistake in the code, I've edited it, can you try again?
https://generatepress.com/forums/topic/header-widgets-order/#post-1789985