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:

CSS

@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: