How to have top bar text aligned right with social media icons next to it

[core365]

Hi, I’m working on a site and I’ve managed to get the top bar text aligned right with social media icons next to it, however the icons are overlapping each other, so I know somewhere in the CSS it’s incorrect, but I don’t know how to correct it! I hope you don’t mind taking a look please.

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

Here’s the CSS:

/* Top bar */
.x-topbar .p-info {
  font-family: 'NTR', sans-serif !important;
  font-size: 30px;
  letter-spacing: 0px;
  margin-top: 30px;
  margin-right: 100px;
  float: none;
  text-align: right;
  text-transform: none;
}
.x-topbar {
    position: fixed;
    width: 100%;
    min-height: 35px;
  height: 35px;
  text-align: center;
}


/* Social Media Icons */
.x-topbar .x-social-global a {
    width: 40px;
    height: 40px;
    line-height: 0px;
  margin-right: 1px;
  margin-left: 2px;
  margin-top: -40px;
  float: right;
  color: #62c3d1;
}
.x-topbar .x-social-global a:hover {
color: #175da9;
}
.x-topbar .x-social-global a i {
    font-size: 35px;
}

Thanks!

[jade]

Hi there,

Please find this code you have added:

.x-topbar .x-social-global a {
    width: 40px;
    height: 40px;
    line-height: 0px;
    margin-right: 1px;
    margin-left: 2px;
    margin-top: -40px;
    float: right;
    color: #62c3d1;
}

Then remove float: right; then set the top margin to 30px.

Then add this code to the Global CSS:

.x-topbar-inner {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

Hope this helps.

[core365]

Brilliant!!! Thank you so much for that, it’s really appreciated!

[basanta]

you are most welcome!