Social icons in top menu bar

Hi Stratos,

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

Hope this helps!

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

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.

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?

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.

Excellent. It worked!

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

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.

Thank you! It worked perfectly. Resolved!!!

Glad to hear that!