Docs

[Frocreate]

I’d like to include some links in the topbar, aligned left. Ive managed to get them where I’d like them but need a little help with the CSS in changing the link colors to white while leaving the icons the light blue color. I’ve been able to do this before, but cannot seem to get it to work on the current page Im working on.

I’d also like to know how to adjust the spacing between the links, icons, etc. Thanks!

Ill post a link in a private reply.

[Frocreate]

This reply has been marked as private.

[Lely]

Hello There,

Thank you for the URL. Please add the following CSS:

p.topbar-links a:nth-child(2) {
    margin-left: 5px; /*Space of the 2nd icon from the first link text*/
}
p.topbar-links a>i {
    margin-right: 5px; /*Space between icon and text*/
}
p.topbar-links a {
    color: #fff !important; /*Link font color*/
}

Hope this helps.

[Frocreate]

Thanks!

That mostly worked – I still cannot seem to get the left/right spacing to work on my end. Also, if I remove the first bit of CSS:

p.topbar-links a:nth-child(2) {
margin-left: 5px; /*Space of the 2nd icon from the first link text*/
}

…the rest of the changes I make seem to stop working (i.e. colors revert back to all blue).

Also, how do I change the font family, size, etc?

Lastly, where do I insert CSS to adjust the top/bottom margins to space the links vertically equal?

[Rupok]

Hi there,

Thanks for writing back. You don’t need to take off the code as you can change the value to adjust the spacing. Let’s increase the 5px to greater number to see the changes.

You already added this to change the font-family :

p.topbar-links {
  font-family: "open sans","sans serif" !important;
}

You can add font-size there as well.

To vertically align this; you can add this :

.x-topbar {
  padding: 20px 0 0;
}

Hope this helps.

[Frocreate]

Thank you so much!

[Rahul]

You’re most welcome!

[Author]

Posts