Can the topbar text be aligned right so it's next to the social media icons?

Support
#1

Hi, I’m working on a site and I’ve tried to align the topbar text to the right as I want it to be next to the social media icons, but when I’ve tried adapting the CSS to do so (float: right) then the social media icons move onto the line under it! I’m trying to do it so the topbar text is aligned right and on the same line as the social media icons, and the social media icons will be to the right of the topbar, in the same position as they currently are, but I have no idea how to do it!

Hope you can help!

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

#2

Hi there,

Please update this code:

.x-topbar .p-info {
    font-size: 14px;
    letter-spacing: 0.3px;
    margin: 0px 0 0;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Cabin',sans-serif;
}

to

.x-topbar .p-info {
    font-size: 14px;
    letter-spacing: 0.3px;
    margin: 0px 0 0;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Cabin',sans-serif;
    float: right;
}

then update:

.x-topbar .x-social-global {
    float: right;
    margin-top: 12px;
}

to

.x-topbar .x-social-global {
    float: right;
    margin-top: 12px;
    clear: both;
}

Hope this helps.

#3

Hi, I’ve replaced the CSS with what you suggested and the topbar text has moved over to the right, but the social media icons are on the line under it instead of on the same line next to it - I don’t know if I’ve done something wrong!

Thanks!

#4

Hi There @core365

Can you please try updating your CSS as follows and see if that helps.

.x-topbar .x-social-global {
    float: right;
    margin-top: 12px;
    clear: both;
}
.x-topbar .p-info {
    font-size: 14px;
    letter-spacing: 0.3px;
    margin: 0px 0 0;
    margin-right: 0px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Cabin',sans-serif;
    float: right;
    margin-right: 135px;
}

Thanks!

#5

Hiya, I’ve updated it but unfortunately the social media icons are still on the line underneath and I removed the margin-top: 12px; I set for it to see if that made much difference but it hasn’t!

Thanks!

#6

Hi @core365,

In that case, please try this one

.x-topbar .x-social-global {
    float: right;
    clear: both;
    position: relative;
    top: -25px;
}

It should align it.

Thanks!

#7

Yay! That sorted it, thanks!

Thanks for all your time and help with this!

Cheers!

#8

You’re most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.