[Resolved] Reduce Top Margins for Top Bar Widget

[Max]

Hello!

I am trying to reduce the top margins on the top bar widget. I already have some CSS in there for vertical alignment and reducing the bottom margins more which has worked perfectly but I would like the bottom margins and top to match. I already have them set to 0px in Layout–>Top Bar.
You can see a screenshot of what I currently have here. https://imgur.com/a/hrnfbLC

This is the CSS I am already using which is working great:

.inside-top-bar p {
margin-bottom: 0;
}
.top-bar .wp-block-columns {
margin-bottom: 10px;
}

Thank you for your assistance.

[Ying]

Hi Max,

In the telephone number link, there’s a <br> in your code, can you try to remove it?
https://www.screencast.com/t/6CuEOE3q8

[Max]

Hi Ying,

I removed it and it broke the code haha. Is there CSS to fix this and make everything center aligned? Here’s what it looks like now: https://imgur.com/a/zYtOzqJ

Thanks!

[Ying]

Try add this CSS to remove all margin from the elements in top bar:

.top-bar > .inside-top-bar * {
    margin: 0 !important;
}

Then you can add padding in customizer > layout > top bar.

But the image need to be cropped properly:
https://www.screencast.com/t/wOZdY07o

[Max]

Hi Ying,

I removed the other CSS I had and added what you gave me and that got rid of the margins but they are still not aligning correctly. The text has space below and the image has space above.
Example: https://imgur.com/a/flyOdX7

Thank you,

[Max]

Hi Ying,

Never mind, sorry I missed that last part of your reply about the photo. Seems like that fixed it.

Thank you again for the help as always. Have a great week.

[Ying]

No problem 🙂

[Author]

Posts