Sticky Header and Navigation

0
Hello all! I have a page that I would like the header and nav bar always appear at the top of the page.  The rest of the page would need to scroll underneath this section.  I've tried to modify the css of the items to have position: sticky, but no luck. Does anybody know how to accomplish this?
asked
1 answers
7

Hi Andrea, 

You can do this in css.

Here is class that you can apply to your header

.sticky-header {
    
    margin: 0;
    padding: 0;
    width: 100%;
    top: 0;
    z-index: 101;
    position: -webkit-sticky;
    position: sticky;
    
}

 

If you need to support IE, you can use this

.sticky-container {
    
    height: 175px;
}

.sticky-header-fixed {
    
    margin: 0;
    padding: 0;
    width: 100%;
    top: 0;
    z-index: 101;
    position: fixed;
}

 

Where you put a container around your header and add the class sticky container and define the height manually. So play around with that value. Then apply the class sticky header fixed to your header.

 

 

Here is some documentation on changing the style sheets

https://docs.mendix.com/howto50/setup-mendix-ui-framework-with-koala

 

Hope this helps!

answered