Archived topic
Reduce Top Margins for Top Bar Widget
6 replies · Started by Max on April 12, 2022
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.
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
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!
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
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,
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.
No problem :)
