After a lot of research, I am [unable to find a proper solution](https://github.com/twbs/bootstrap/issues/14040) for the **shifting to the right of fixed positioned elements**, cover images, and standard content, when a modal window is open.

**Note**: I am looking for a general, clean solution, not an hardcoded fix that would work just on a specific layout.

Does anyone know how to fix this issue? Please refer to this example: <http://codepen.io/microcipcip/pen/kXdRWK>

```
body {
  height: 2500px;
  &.-modal-open {
      overflow: hidden;
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background: #FF0000;
}
.modal {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    body.-modal-open & {
        opacity: 1;
    }
}

```