- This topic has 9 replies, 4 voices, and was last updated 2 years, 10 months ago by
.
-
Posts
-
Hello. What I want to do is add some social icons in the top menu bar as seen in the image below.
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.
Customer Support
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?
Customer Support
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?
Customer Support
Hi there,
1. the Column Container Block that those buttons inside, select that and in Mobile view set its
Widthto100%
2. select the Buttons Container next and set its Layout > Justify to Center.Thank you! It worked perfectly. Resolved!!!
Glad to hear that!
- You must be logged in to reply to this topic.
