# Be able to put the banner above the main content but not above the sidebar

**URL:** https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280
**Category:** Feature
**Tags:** completed, versatile-banner
**Created:** [May 17, 2023, 6:06pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280 "2023-05-17T18:06:44Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 17, 2023, 6:06pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/1 "2023-05-17T18:06:44Z")

</div>

before i try to attack it with a bunch of code, just wonder if it is even possible to force the banner to sit inside the page container beside the sidebar instead of having the sidebar down under it?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [May 18, 2023, 12:56am UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/2 "2023-05-18T00:56:26Z")

</div>

You can have a look at the [Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673) to see where you can easily add stuff.

That would help only if you were going to create your own component or fork this one, though.

---

<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: [May 18, 2023, 3:16pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/3 "2023-05-18T15:16:18Z")

</div>

I’ve just opened a PR that will add a plugin outlet setting so it can be displayed like this:

 ![Screenshot 2023-05-18 at 11.13.52 AM](https://global.discourse-cdn.com/meta/original/4X/3/8/6/386529bd41fd25dc1eae82cf43cc6657cdc70c5e.jpeg)

@tshenry can you try it out and merge it when you have a chance? [DEV: plugin outlet setting for sidebar, prettier by awesomerobot · Pull Request #15 · discourse/discourse-versatile-banner · GitHub](https://github.com/tshenry/discourse-versatile-banner/pull/15)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 18, 2023, 3:24pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/4 "2023-05-18T15:24:45Z")

</div>

thank you so much for this and for all your great work @awesomerobot 🙂

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [May 18, 2023, 5:49pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/5 "2023-05-18T17:49:35Z")

</div>

> [@awesomerobot](#):
>
> @tshenry can you try it out and merge it when you have a chance?

Looks great 🤩 Thanks @awesomerobot!

PR merged!

---

<div class="post-metadata">

### Author: ![frold](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frold/32/82547_2.png) [@frold](https://meta.discourse.org/u/frold)
#### Post date: [May 18, 2023, 5:54pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/6 "2023-05-18T17:54:14Z")

</div>

Tested and working smooth!

> [@Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133/338):
>
> > [@awesomerobot](#):
> >
> > @tshenry can you try it out and merge it when you have a chance?
> 
> Looks great 🤩 Thanks @awesomerobot!
> 
> PR merged!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 18, 2023, 6:25pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/7 "2023-05-18T18:25:42Z")

</div>

works perfecly! 👍

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 20, 2023, 2:53pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/8 "2023-05-20T14:53:59Z")

</div>

just a quick note - this component seems to leave a gap in the top margin under the header in desktop view - it is also noticeable above the navigation bar in views where it’s not enabled (ie: if `show for members` is disabled).

to repro, go to a category or topic list page in a desktop view and compare when the component is enabled or disabled - the top margin expands by about 25px. this is can been seen in views where the banner is not enabled for members too (i’ve added a `top-margin` corrector to the `main-outlet` in common css for the time being).

---

<div class="post-metadata">

### Author: ![md-misko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/md-misko/32/126315_2.png) [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [May 26, 2023, 2:09pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/9 "2023-05-26T14:09:32Z")

</div>

> [@Lilly](#):
>
> this component seems to leave a gap in the top margin under the header in desktop view

I can observe the same in mobile view also. Disabling this TC fixes the gap, so the cause is definitely in here somewhere.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 26, 2023, 2:12pm UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/10 "2023-05-26T14:12:14Z")

</div>

FYI, you can add this to the common css for formatting the banner. i use similar for formatting my versatile banner to fix it in the meantime.

```scss
// * compensate for versatile banner top margin off-set *

#main-outlet {
  margin-top: -25px;
}

```

---

<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: [September 27, 2023, 9:18am UTC](https://meta.discourse.org/t/be-able-to-put-the-banner-above-the-main-content-but-not-above-the-sidebar/280280/11 "2023-09-27T09:18:32Z")

</div>

4 posts were merged into an existing topic: [Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133/334)
