div jumps off position when hits the wide screen breakpoint

I have the following HTML:

<div id="#header">
    <div class="side-nav stickyMenu stickyNav" id="#sectionNav.pub-side-nav">
        <div class="secondaryNav">

Whenever I zoom out to the point of hitting the wide-screen breakpoint, the .secondaryNav visually jumps off outside .

#header {
    max-width: $content-width;
    margin: -162px auto 0;
    margin-bottom: 0;
    padding: $small-padding;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 300;

    -webkit-transition: top .3s;
    transition: top .3s;
}

main nav#sectionNav.pub-side-nav {
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 130px;
    float: right;
    right: calc((100% - #{$content-width}) / 2);
    z-index: 200;
    padding: 0px;
    border-left:1px solid #e2dbf3;
    height: calc(100vh - 130px);
    width:420px;
    overflow: hidden;
    -webkit-transition: top .3s;
    transition: top .3s;
}

ul.secondaryNav {
    margin: 0;
    padding: 100px 20px 50px;

    @include breakpoint(wide-screen) {
        margin-top: 0px;
        top: 150px;
        left: 50%;
        margin-left: 220px;
        overflow: hidden;
        box-sizing: border-box;
        clear: right;
        background-color: yellowgreen;
    }
}

This only happends when it hits the wide-screen breakpoint. Does anyone has some idea what is going on here? I can only change the secondaryNav.



Read more here: https://stackoverflow.com/questions/64956178/div-jumps-off-position-when-hits-the-wide-screen-breakpoint

Content Attribution

This content was originally published by staminna at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: