[BijanParticipant]

Hi guys,

I’ve got the social icons on the left, login for our JS cms on the right, and when I try to add text in the center, it loses vertical allignment, please help

wps.yagoy.nl

also, when using small screens, the social icons start aligning vertically…

[BijanParticipant]

this is the custom css I have going on allready

/* Change the topbar height */
.x-topbar{
  height: 40px
}

/* Change the topbar font size */
.x-topbar .p-info, .x-topbar .p-info a{
  font-size:16px!important;
}

/* for social icon */
.x-topbar .x-social-global a {
  font-size:25px!important;
}

.x-topbar .x-social-global {
float: left;
}
.x-topbar {
text-align: center;

}
.x-topbar .p-info {
float: right;
margin: 10px auto;
}

[RupokMember]

Hi there,

Thanks for writing in! I am a bit confused about what you are trying to achieve. Would you clarify each issue point by point with screenshots? It would be helpful for both of you and us.

Cheers!

[BijanParticipant]

it’s about the vertical allignment of the content in the topbar

[ChristianModerator]

Hey there,

Your screenshots failed to upload due to large file size. Please resize and upload again.

Thanks.

[BijanParticipant]

the social icons on the left have dropped out of the top bar section,
the text in the center is higher than the login/signup on the right;
I would love to have these all alligned correctly

[LelyModerator]

Hi Bijan,

Please try adding this CSS:

.x-topbar-inner {
    position: relative;
}
.x-topbar-inner p:nth-child(2) {
    margin-top: 10px;
}

Then update this:

.x-topbar .x-social-global {
float: left;
}

To this:

.x-topbar .x-social-global {
    float: left;
    margin-top: 0;
    position: absolute;
    top: 10px;
}

Hope this helps.

[BijanParticipant]

Hey there, that’s great! many thanks;

but I’m left with the following:
our logo is centered, and the text above it should also be centered, but they don’t look alligned…
can you help me with this?

Also, I want to have all the text in the site to be according to
Century Gothic,CenturyGothic,AppleGothic,sans-serif;
i’ve got it working for the menu’s, but all the other text appears in the standard font,
can you help me with this too?

stay happy,
B

[RadModerator]

Hi there,

Please try adding a class name to your text, for example,

<a href="wps.yagoy.nl/new-student-offer" title=" 10 classes in 1 month" class="topbar-center-text">NEW STUDENT OFFER: 10 CLASSES FOR €50 </a>

Then simply add this CSS too,

.topbar-center-text  {

display: inline-block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    top: -30px;
    text-align: center;

}

Your menu’s font isn’t Century Gothic, it’s font-family: "Muli",sans-serif;. Should it be Muli?

Thanks!

[BijanParticipant]

hey there,

the alligment is fixed now, that’s awesome!!!

but;
if you visit, wps.yagoy.nl, the link of login|register, is not working anymore 🙁

as far as the font goes, Muli is the closest google font to century gothic… so that’s correct, I want the rest of all text to use that font, where do I change that for the whole site?

[RupokMember]

Hi there,

Thanks for updating. You can use this to fix the clicking issue for the links :

.x-topbar .p-info {
  position: relative;
  z-index: 9999;
}

To change the font for whole site, you can enable custom font from Customize > Typography and set the font for body content.

Cheers!

[BijanParticipant]

thanks for your awesome help!

[John EzraMember]

You’re most welcome! 🙂

[Author]

Posts