WPMU Slide-in plugin is hiding behind the header on my Bridge theme website

Good afternoon!

I need some help on this one. Many solutions have been tried to fix this and I just can't seem to find a fix!

On screen sizes that are smaller than about 2500px, the slide-in is "hiding" underneath the heading. The site that I am referring to about this issue is http://theie5.org/peninsulaim/ Any page on that site will reflect the issue.

This issue arose when I started adding customizations to the contents of the plugin. Here is the custom CSS that is currently in the global settings of the slide-in plugin:

.wdsi-slide-close:before{
   border-color: #1abc9c !important;
}

.wdsi-slide-close{
   border-color: #1abc9c !important;
}

.wdsi-slide-wrap {
   border-color: #1abc9c !important;
}

.wdsi-slide-content .wdsi-slide-title {
    color: #1abc9c !important;
}

.wdsi-slide-content a{
    color: #1abc9c !important;
}

.wdsi-slide-close a{
    color: #1abc9c !important;
}

.wdsi-slide-content {
   color: #e3e3e3 !important;
}

Many of the CSS above had #wdsi-slide_in at the front, though I removed it to see if that selector was causing the issue. Upon it's removal the issue still existed and my customizations remained. Basically, that is a moot point but I thought I would document everything in hopes of finding resolution :slight_smile:

When I look at the slider under "inspect elements" on my mac, it appears that the #wdsi-slide_in has a top-margin: ?265px (another interesting notice was that when I inspect the elements, the slide-in moves out of full sight on my 17" screen, it comes back when I close out the inspect elements functions, but I just thought that it was weird…)

In order to correct that, I have attempted the following CSS (not all at the same time)

#wdsi-slide_in{
margin-top: 100px; (and 15px, 10px and 5px)
}

#wdsi-slide_in{
position: relative;
top: 265px;
}

#wdsi-slide_in{
position: absolute;
top: 380px;
}

#wdsi-slide_in{
position: fixed;
top: 265px;
}

I have also tried deleting the slide-in that I built and making another one to fix the issue.

After all of this, I have a "sort of" solution.

The option where I positioned the slide-in 'absolute' and 'top: 400px', it works on all laptop and desktop screens.

The drawback is that the slide-in no longer scrolls with the page once I do this.

Two potential issues that I see are:

The fluid scrolling that is a part of the theme I am using for this particular site.

The custom injection. I have finally got a grip on CSS but custom injections are a bit above my pay grade still :slight_smile:

I have not tried a custom injection and thought that it might be causing the issue. The one that defaults in the system is 'loop_end' This was interesting to me because when I tried to use relative positioning, the slide-in would move to the bottom of the page… I just thought I would throw that out there. I am happy that I found a fix (insert pat on the back) that at least makes the slide-in work however I would ideally like for it to scroll with the page.

Thank y'all for being the best out there! I look forward to hearing from you.

Pura Vida!
Mandy