Center text on topbar

[eutaw]

I have two lines of text on the topbar that I would like centered. I have tried to center it using spaces, but, of course, that’s just a guess. How do I get the two lines of text centered, but leave the social icons to the right? I want the text to remain centered even when the screen size changes. I really appreciate your help.

[ruenel]

Hello @eutaw,

Thanks for writing in!

I have checked your site and I found out that you have added this custom CSS which complicates your issue. You have this:

.x-topbar .p-info {
    float: right;
    margin-top: 5px;
   }

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

Do you want the topbar content to display like this?

Please do the following:
1.) Remove your custom CSS first.
2.) Instead of floating the topbar content to the right, set the width of the top bar content by calculating 100% - the current width of the social icons which is at least 80 pixels. You could use the CSS calc function as explained here: https://www.w3schools.com/cssref/func_calc.asp
3.) And then align the text to the center using CSS text-align property.

• https://www.w3schools.com/cssref/pr_text_text-align.asp

Therefore, your code will only be:

.x-topbar .p-info {
    width: calc(100% - 80px);
    text-align: center;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this makes sense.

[eutaw]

Yes, this does make sense. Thank you sooooo much!

[ruenel]

You are most welcome @eutaw!