Sticky message sidebar

Yachtie · Jan 24th 2020

Hello!!

Thank you again for the code provided for the sidebar, I tried to use it also for the .messageSidebar but I get an issue with the custom layout for the staff,

I used this code:

Code

.messageSidebar {
align-self: flex-start;
position: sticky;
top: 50px;
}

But I also am using this code for 4 different groups:

Code

@include screen-md-up {
.userOnlineGroupMarking4 .messageSidebar {
border: solid 3px #075885 !important;
border-bottom-width: 30px !important;
}
.userOnlineGroupMarking4 .messageSidebar::after {
content: "" !important;
bottom: -25px !important;
height: 20px !important;
left: 50% !important;
position: absolute !important;
transform: translateX(-50%) !important;
width: 102px !important;
color: #fff !important;
top: inherit !important;
font-size: 14px !important;
background-image: url('#{$style_image_path}yachtingworld-MessageSidebar-Banner.png');
}
.userOnlineGroupMarking4 .messageSidebar .userCredits {
display: none;
}
}
@include screen-sm-down {
.userOnlineGroupMarking4 .messageSidebar {
background-color: #075885; /* Different background color */
}
.userOnlineGroupMarking4 .messageSidebar::after {
background-image: url(https://www.yachting-world.net/images/logobannermobile-test1.png); /* Use your own image here */
background-size: cover;
content: "";
height: 30px; /* Make adjustments based on the image dimensions here */
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 30px; /* Make adjustments based on the image dimensions here */
}
.userOnlineGroupMarking4 .messageSidebar a {
color: #fff;
}
}

Display More

when using the "sticky" code, the message sidebar layout gets a bit disturbed, meaning the image moves and does not show where supposed to.

Without code

With code: