CODEWITHSUNDEEP
htmlcsscss-positionsticky
Khujand Nanocoding
Khujand Nanocoding

Reputation: 125

advanced sticky positioning

i need to make some elements sticky or fixed. Its an angular project and i have already managed static and dynamic elements.

left menu is static and main content will be dynamic. main content has own top menu, content and footer.

i've added sticky position to sidebar-menu, header, action-panel.

But now sidebar position won't work, and i have some issue on header and action-panel such a box-shadow hidden;

here final result

here code with result preview

Upvotes: 3

Views: 425

Answers (1)

Sehjad
Sehjad

Reputation: 81

To make the sticky of right sidebar please replace this CSS with your aside tag.

aside {
    flex: 1 1;
    display: block;
}

.content header {
    height: 70px;
    width: 100%;
    position: sticky;
    top: 0px;
    background: #fff;
    margin-bottom: 10px;
}

Upvotes: 4

Related Questions