[Resolved] Social icons in top menu bar

[Stratos]

Hello. What I want to do is add some social icons in the top menu bar as seen in the image below.

Social Icons in menu bar

I found various topics here for something similar but to be honest I am more confused on how to do this. If you can give me some simple directions with steps to follow I would be thankful.

[Fernando]

Hi Stratos,

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

Hope this helps!

[Stratos]

Thanks. This helped a lot. But I have a small problem. I am trying to make the border line in the photo below shorter without changing the overall thickness of the social media row. But no matter what I try it doesn’t change the way I want. Any help?

PHOTO

[Ying]

I haven’t seen the actual page, I assume the border is the same height as the icon/text’s line height.

You might need to set the element’s line height to a smaller value, then add a top/bottom margin to compensate the space.

If this is not the case, please link us to your site.

[Stratos]

I have provided my website link because I have no idea how to do this right. I cannot make this line smaller without changing the thickness of the whole element.

Also I need help with another matter. When in desktop mode this bar is showing correctly. I want when in smartphone mode these icons to be centered. Right now as it is I calculated approximately and made it look like it is in the center. How can I make it so these icons will center correctly when viewing from a smartphone?

[Fernando]

Remove that border, and add this through Appearance > Customize > Additional CSS:

a.gb-button.gb-button-a14fc65d::after {
    content:"";
    width: 1px;
    height: 70%;
    background-color: #fff;
    position:absolute;
    right: 0;
    margin-left: 30px;
    transform:translate(-50%,-50%);
    top: 50%;
    
}
a.gb-button.gb-button-a14fc65d{
    position: relative;
}

Replace 70% in the code with your preferred height.

[Stratos]

Excellent. It worked!

Now how can I make these social icons (with the About button included) to perfectly center when in smartphone view?

[David]

Hi there,

1. the Column Container Block that those buttons inside, select that and in Mobile view set its Width to 100%
2. select the Buttons Container next and set its Layout > Justify to Center.

[Stratos]

Thank you! It worked perfectly. Resolved!!!

[David]

Glad to hear that!

[Author]

Posts