Custom Navigation bar

Using Streamlit
1

I am using this hover on sidebar source code but I’m facing the problem that everytime i hover on the sidebar it expands pushing the content on the right. I would like for it to expand on top of the content. Does anyone have an idea?
This is the component I’m using: from st_on_hover_tabs import on_hover_tabs
and the css file:
style.css file


section[data-testid='stSidebar'] {
    background-color: #fff;
    min-width:unset !important;
    width: unset !important;
    flex-shrink: unset !important;
    position:fixed;
}

@media(hover){
    /* header element to be removed */
    header[data-testid="stHeader"] {
    }

    /* The navigation menu specs and size */
    section[data-testid='stSidebar']{
        position:fixed;
        background-color: #fff;
        min-width:unset !important;
        max-width: unset !important; /*<--- This part is optional.*/
        width: unset !important;
        flex-shrink: unset !important; /*<--- This part is optional.*/
        
    }

    /* The navigation menu open and close on hover and size */
     section[data-testid='stSidebar'] > div {
    height: 100%;
    width: 55px; /* Put some width to hover on. */
     } 

    /* ON HOVER */
    section[data-testid='stSidebar'] > div:hover{
    width: 280px;
    }

    /* The button on the streamlit navigation menu - hidden */
 
}
   
@media(max-width: 272px){
    
    section[data-testid='stSidebar'] > div {
        width:13rem;
    }
}
2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.