Search for: Log In Free Support [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 6 months, 3 weeks ago by David. Viewing 8 posts - 1 through 8 (of 8 total) Author Posts June 24, 2020 at 7:58 pm #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? June 24, 2020 at 9:36 pm #1340900 LeoStaff Customer Support 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/ June 24, 2020 at 9:45 pm #1340917 Keith I removed it June 24, 2020 at 9:48 pm #1340920 LeoStaff Customer Support 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/ June 24, 2020 at 9:52 pm #1340921 Keith Correct, it’s the spacing that is giving be issues – both with the widgets and the icons June 25, 2020 at 4:26 am #1341224 DavidStaff 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; } Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ June 25, 2020 at 6:39 am #1341358 Keith Thank you, that is much better. Any suggestions on how to get the icons and text to align vertically in the middle? June 25, 2020 at 7:34 am #1341417 DavidStaff 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; } Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ Author Posts Viewing 8 posts - 1 through 8 (of 8 total) You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In