I cant get top bar spacing correct

[Keith]

I have been looking through the forums and got the top bar widgets to float right together, but the spacing of the icons and the space between the widgets is a mess.
So far the things I have found didn’t work… what am I missing?

[Leo]

Hi there,

Can you first removing your own CSS for the top bar and let me have a look?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Keith]

I removed it

[Leo]

So just to confirm, the desired result is to have e-mail then phone number, both on the right side?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Keith]

Correct, it’s the spacing that is giving be issues – both with the widgets and the icons

[David]

Hi there,

try adding this CSS:

.top-bar-align-right .inside-top-bar>.widget:nth-child(even) {
    float: none !important;
    margin-left: 2em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Keith]

Thank you, that is much better. Any suggestions on how to get the icons and text to align vertically in the middle?

[David]

Be easier if your HTML was a single <a> tag for each link like so:

<a class="top-bar-link" href="mailto:what@evercom">
    <img src="url-to-image" alt="alt text" width="25" height="25" />
    Link Label 
</a>

Then you can use some CSS to align them:

.top-bar .top-bar-link {
    display: flex;
    align-items: center;
    min-height: 40px;
}
.top-bar .top-bar-link img {
    margin-right: 0.25em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts