# Welcome Link Banner has extra margin

**URL:** https://meta.discourse.org/t/welcome-link-banner-has-extra-margin/270604
**Category:** UX
**Tags:** completed, welcome-link-banner
**Created:** [October 24, 2022, 6:42pm UTC](https://meta.discourse.org/t/welcome-link-banner-has-extra-margin/270604 "2022-10-24T18:42:54Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [October 24, 2022, 6:42pm UTC](https://meta.discourse.org/t/welcome-link-banner-has-extra-margin/270604/1 "2022-10-24T18:42:54Z")

</div>

There is a small margin bug:

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/0/2/50274082bcb118c62e0ad3f96449315256ead6d2.png)

I can not see this issue on meta, but on my instance, this is caused by this CSS code:

![image](https://global.discourse-cdn.com/meta/original/4X/f/b/2/fb2accec3a3dbe8e62059296cb90468b805e1d75.png)

The code is there to add some margin between top buttons and the welcome banner, but it’s also enforcing the margin on places where it should not be, the margin also stays enabled even if the welcome banner is hidden, for example, because of staff or trust level.

EDIT: sloppy fix?  
Remove the margin from this class:

```plaintext
.above-main-container-outlet.welcome-link-banner-connectors {
    margin-bottom: 0em !important;
}

```

And add the same margin on this class:

```plaintext
.above-main-container-outlet.welcome-link-banner-connectors .welcome-link-banner, .below-site-header-outlet.welcome-link-banner-connector .welcome-link-banner {
    margin-bottom: 1em;
}

```

This seems to have solved the issue for me. Haven’t seen things breaking so far and the banner still looks good.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [December 21, 2022, 5:33pm UTC](https://meta.discourse.org/t/welcome-link-banner-has-extra-margin/270604/2 "2022-12-21T17:33:09Z")

</div>

`.above-main-container-outlet.welcome-link-banner-connectors` has a `margin-bottom: 1em` I don’t see the purpose for.

Besides, it adds an empty space whether the Welcome banner is displayed or not. If it’s not displayed, the margin shouldn’t be here.

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/c/f/7cf47431e70d45d7cc8dcfda1adae6c0934adb86.png)

It can also mess with the layout of other theme components below, like the light rope from [Christmas Decoration Component 🎄](https://meta.discourse.org/t/christmas-decoration-component/173949).

Example:

Two solutions here:

Either remove the `margin-bottom` from the Welcome Banner component if it has no use or add a `display: none;` on the Welcome Banner when the requirements for it to be displayed are not met.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 21, 2022, 6:54pm UTC](https://meta.discourse.org/t/welcome-link-banner-has-extra-margin/270604/3 "2022-12-21T18:54:21Z")

</div>

Thanks for letting me know! There are some cases where the banner is immediately above another banner or alert, which is why it needs the margin. I was able to relocate the margin to remove the impact when the component is hidden.

[https://github.com/discourse/discourse-welcome-link-banner/pull/8](https://github.com/discourse/discourse-welcome-link-banner/pull/8)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [December 21, 2022, 7:04pm UTC](https://meta.discourse.org/t/welcome-link-banner-has-extra-margin/270604/4 "2022-12-21T19:04:45Z")

</div>

> [@Canapin](#):
>
> Two solutions here

Well, it was a third then! 😆

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [July 5, 2023, 6:48am UTC](https://meta.discourse.org/t/welcome-link-banner-has-extra-margin/270604/5 "2023-07-05T06:48:57Z")

</div>