Sticky bar on left side of forums

[ChiropracticBender#2073]

On our forums we are using ModernBB. I want to add a left sticky sidebar 100% height 275px wide with a iframe in it on all pages. Widgets won't allow me to create a iframe at 100% height so is there a way to use javascript that will allow us to have this functionality?

[SLGray]

What exactly are you wanting to add in this bar?

[ChiropracticBender#2073]

a titanembed which displays chat from discord

[ChiropracticBender#2073]

this is implemented with a widget on the site at this time. We would like to see it fit 100% height on the left.

We have this as a widget at this time. What i want to do is have it stuck to the left side of the screen below the header and sticky navbar. when a user scrolls no matter how big they have the screen it will stay static on the left side.

[skouliki]

Please don't double post. Your posts need to be separated by 24 hours before bumping. Please use the edit button, instead! Please read our forum rules: ESF General Rules

[SLGray]

Have you tried the Discord Server widget in the AP?

[ChiropracticBender#2073]

ya we have tried that widget from the ap panel but it doesnt integrate live chat with discord authentication. on mobile we utilize the discord ap but on desktop we use titan.

[ChiropracticBender#2073]

issues resolved

we edited the html for the corresponding pages we want the side bar to be located on

Code:

<div class="wrapper">
    <div class="sidebar">
      sidebar code here
    </div>
    <div class="main">

websites html code

Code:

</div>
</div>

Added to the CSS style sheet:

Code:

/* Sticky sidebar */
.wrapper {
  display: flex;
  justify-content: space-between;
}

.main,
.sidebar {
  border: 0px solid black;
  padding: 0px;
  background-color: #fff;
}

.main {
  width: 90%;
  height: 100%;
}

.sidebar {
  width: 275px;
  height: 98vh;
}

body {
  background-color: #fff;
  font-family: sans-serif;
  padding: 0px;
}

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 30;
}

Results:

[SLGray]

Thanks for posting the solution.

Problem solved & topic archived. Please read our forum rules:  ESF General Rules