Docs

[smsfthinker]

Hello there,

Can you please help me vertically align the social media icons in my topbar? I would like them to align with the H1 text ‘Blog With Confidence’ here http://blogwithconfidence.com/

Thanks for your help.

Helen

[Nico]

Hi There,

Thanks for writing in.

Add this in your customizer > Custom > CSS:

.x-topbar .x-social-global{
    margin-top: -90px;
}

It would not be responsive however you could play with @media queries CSS so that it would responsive.

For example:

@media max-width(767px){
.x-topbar .x-social-global{
    margin-top: 10px;
}}

Hope it helps.

Let us know how it goes.

Thanks.

[smsfthinker]

Thanks Nico,

Is it possible to make it responsive by just centreing it within the topbar instead rather than trying to align it to specific text?

Regards
Helen

[Nico]

Hi There,

Little confuse of what you want to achieve. Would you mind sharing us a screenshot of what you want to achieve.

Thanks.

[smsfthinker]

Hi Nico,

1. Per attached screenshot I’d like the social icons to not sit on the bottom of the top bar. The first CSS code you gave me achieves that. Yay.

2. But I also want them to be responsive on mobile devices. You mentioned that the CSS for moving the icons may cause them to become un-responsive which it did. I just thought they may be a way to achieve point 1. without having to add second CSS code to make it responsive.

Regards,
Helen

[smsfthinker]

Oops, here’s a compressed screenshot.

[smsfthinker]

Hi Nico,

Alternatively maybe I could add them to the top menu bar instead?

Regards,
Helen

[Paul R]

Hi Helen,

To fix it, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
   .x-topbar .x-social-global {
        margin-top: 0px;
        float:none;
        margin-bottom:20px;
        text-align:Center;
   }
}

After adding it, kindly clear your browser cache before checking.

Thanks

[smsfthinker]

Brilliant. Thanks so much Paul.

[Paul R]

You’re welcome! 🙂

[Author]

Posts