Center topbar elements

[bluekat]

Below 767px max-width screen, “follow me” .p-info text and .x-global-social icons appear centered. I would like it to always look like that on all screen sizes. but on wider screens the two elements are on the right and left. I’ve tried forcing float: none, but apparently i’m not doing it correctly .

[ruenel]

Hello @bluekat,

Thanks for writing in!

To achieve what you have in mind, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-topbar .p-info {
    float: left;
    margin: 13px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: #b7b7b7;
    background-color: transparent;
}

.x-topbar .x-social-global {
    width: 140px;
    float: right;
    margin-top: 10px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

We would loved to know if this has work for you. Thank you.

[bluekat]

Thanks, but I think you misunderstood. I want it to always have that stuff in the center, like it currently does on small screens.

[ruenel]

Hello @bluekat,

You want it the other way around? Well in that case, you can add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r) instead

.x-topbar .p-info {
    float: none;
    margin: 0;
    padding: 0.8em 1em 1em;
    background-color: #f6f6f6;
    border-radius: 0 0 4px 4px;
    text-align: center;
}

.x-topbar .x-social-global {
    float: none;
    margin-bottom: 8px;
    text-align: center;
}

And you will have this layout:

Hope this helps. Kindly let us know.

[bluekat]

That’s it!

I was so close, but left out the text-align:center.

Thanks once again!

[friech]

You’re more than welcome, glad we could help.

Cheers!