[Resolved] Add social media icon and search in between the header

[Jeena]

Hi,

I want to add social media icons and a search button in the header, like the picture below. I have attached link to my website.

Please help.

thank you

[David]

Hi there,

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

[Jeena]

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

[Fernando]

Hi Jeena,

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

[Jeena]

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

[Jeena]

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

[Fernando]

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.

[Jeena]

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

[Fernando]

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?

[Jeena]

Hi Fernando,

Sorry, please find the attached screenshot below.

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

Thanks

[David]

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.

[Jeena]

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.

[Ying]

Hi Jeena,

Try adding this CSS:

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

[Jeena]

It worked!

Thank you David, Ying, and Fernando. 🙂

[Ying]

No problem 🙂

[Author]

Posts