Home / Questions / 297007
Accepted
Emiliano Torres
Asked: 2020-09-29 05:11:07 +0800 CST 2020-09-29 05:11:07 +0800 CST

Fixed top div "sliding" when left side menu is expanded

  • 772

I am having a problem with an ngx-admin page created by me. I have created a fixed div, which does not move as a header, so that when the user scrolls that div is always at the top and so the information of my process is always seen. So far so good. The problem arises when the user expands the left side menu. All the part of the page responds well, except the fixed div that I put above. I leave you the following image, where it is shown when everything looks nice.

enter image description here

When I expand the left side menu, this happens:

enter image description here

The css of the top div is as follows:

.superior {
    position: fixed;
    z-index: 100;
    background: #f1f5f8;
    width: 92%;
    height: 200px;
    top: 3rem;
    border-bottom: $rojo-claro dotted 1px;
}

The truth is that I am very new with css and I did not find a way to solve it. I tried removing the "width: 92%" and it improves, but it doesn't cover the entire width of the screen. I really don't know how to tell it that if the menu is expanded, that the width is different. Another thing I tried was to put a large z-index on the left side menu, but that attempt never responded. I hope you can give me a hand, it is very important that I solve it. If you need more code, please ask me to edit and add it. Thanks in advance

html

1 Answers

  1. Best Answer

    The solution I found was to put it as sticky with left 0. It looked like this and it works fine:

    .superior {
    position: sticky;
    z-index: 100;
    background: #f1f5f8;
    width: 92%;
    height: 200px;
    top: 3rem;
    border-bottom: $rojo-claro dotted 1px;
    left: 0;
}

    I hope it helps someone.

    • 0