[Support request] I cant get top bar spacing correct

Home Forums Support I cant get top bar spacing correct

  • This topic has 7 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1340868
    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?

    #1340900
    Leo
    Staff
    Customer Support

    Hi there,

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

    Thanks ๐Ÿ™‚

    #1340917
    Keith

    I removed it

    #1340920
    Leo
    Staff
    Customer Support

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

    #1340921
    Keith

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

    #1341224
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

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

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

    #1341417
    David
    Staff
    Customer Support

    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;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.