Add social media icon and search in between the header

Hi there,

quick question - what happens to those items on Mobile?
Just need to know so I can look at the best option.

Hi David,

Good question. I didn't realize all social icons are hidden on mobile, which I don't want.

I used a Tasty theme but deleted the top bar social icons when I started this site. I want to add a social icon bar that is also visible on the mobile.

How can I add that again?

I have attached the reference and my site.

Thank you

Hi Jeena,

Here's a video that may assist regarding this: https://www.youtube.com/watch?v=yAleVWQi5EA

Hi Fernando,

Thanks for your reply.

Is there a reason why my element section is stretched? I don't see any option in the container for the width. I have attached a screenshot of the element section.

Thanks

Hi Fernando,

Is it possible to create without an element block? I went through the tasty theme; if I'm correct, social icons were designed without an element block.

Thanks

What do you mean by stretched? Can you share a link to where we can view what you've created?

Yes, you can create that without a Block Element.

Just add GB Button Blocks to the top bar widget in Appearance > Widgets.

Hi Fernando,

I managed to create a top-bar social icon. Thank you.

I have two issues right now.

1. Whenever I create an element or hook block, it covers the entire page width, and I can't see any option in the layout to edit it.

I have attached the screenshot below of an element I created for the archive page.

2. Would it be possible to move the Mailchimp subscription form to the center of the page?

Thanks

1. You can add an inner container to your Container Block. Reference: https://docs.generateblocks.com/article/add-inner-container/

Give it a max-width value. Then, set the left and right margins of this inner Container to auto.

2. The screenshot you shared are the same. Can you re-share the screenshot?

Hi Fernando,

Sorry, please find the attached screenshot below.

Can the Mailchimp subscription form be moved to the center of the page?

Thanks

Hi there,

try adding this CSS:

.mc4wp-form-fields {
    max-width: 600px;
    margin: auto;
}
.mc4wp-form-fields input {
    text-align: center;
    width: 100%;
}

you can adjust the max-width value to suit your needs.

Hi David,

It worked!

Thank you so much.

One last question, how can I remove the bullet in the category section?

I have attached a screenshot below.

Thank you again.

Hi Jeena,

Try adding this CSS:

.site-footer ul.wp-block-categories-list {
    list-style: none;
}

It worked!

Thank you David, Ying, and Fernando. :)

No problem :)