Docs

[Guido B]

Dear Sir/Madam,

I would like to change the size, color and placement of the five social media icons in the topbar.

As you can see the topbar leaves space between the top of the page and the logo. I don’t want so much space to be there, but I would like to have the social media icons in the header.

This is my website: http://www.calisthenicsnederland.nl/

Hope you can help me.

Thank you in advance.

Best Regards
Guido Bakker

[Paul R]

Hi Guido,

To change size and color of social media icons, you can add this under Custom > CSS in the Customizer.

.x-topbar .x-social-global a {
    color: red;
    font-size: 24px;
}

Change red and 24px to achieve your desired output.

With regards to alignment, can you specify where in the header you would like it to appear.

Thanks

[Guido B]

Hi!

Thank you!

Regarding the alignment in the header. If it just could fit in the same corner in the header as it is now in the topbar it would be great. So there is not so much whitespace between the logo and the top of the page.

Thank you in advance.

Best Regards
Guido

[Jade]

Hi Guido,

Please add this CSS:

.x-topbar {
    position: absolute;
    right: 0;
    min-width: 225px;
}

header.masthead {
    position: relative;
}

Hope this helps.

[Guido B]

Hi!

It works, thanks! The only thing is when I view it with the smartphone viewer the social icons are covering half of the logo. Can this be fixed?

Thank you again.

Best Regards
Guido

[Joao]

Hi Guido,

Try adding this code to your Appearence/Customizer/Custom/Css

@media (max-width: 568px) {

  .x-navbar .x-brand {

padding-top: 50px; }

}

Thanks

Joao

[Guido B]

Hi Joao!

Thank you. But it seems that doesn’t do the trick.

Can you try again? 🙂

Best Regards
Guido

[Rue Nel]

Hello Guido,

Sorry if it did not work out. Please have the code updated and use this instead:

@media(max-width: 767px){
  .x-topbar {
    position: relative;
  }    
}

Please let us know if this works out for you.

[Guido B]

Great!

Thank you!

It worked.

Cheers
Guido

[John Ezra]

You’re most welcome!

[Author]

Posts