How can I using uikit to fixed the navbar on the top?

I'm using the uikit css framework, I want to fixed the navbar on the top?


You need to include 'components/sticky.js' file from UIKit package and add data-uk-sticky directive to your fixed bar div.

For example:

<div data-uk-sticky>...</div>

I suggest to use it with navbar component, for example:

<nav id='top-bar' class="uk-navbar" data-uk-sticky>
    <a href="" class="uk-navbar-brand">...</a>
    <ul class="uk-navbar-nav">...</ul>
    <div class="uk-navbar-content">...</div>
    <div class="uk-navbar-content uk-navbar-center">...</div>
    <a href="" class="uk-navbar-toggle"></a>

Add this to your css file:

.uk-fixed-navigation {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;

And add uk-fixed-navigtion class to your navbar.


You also can use their sticky component


 ? When using mako template rendering html page, if there is utf-8 character,it's will tell me error
 ? Pyramid localization: not created .pot file
 ? How to open a txt file in a mako template?
 ? How can I connect my python script with my HTML file?
 ? How to change the mako substitution delimiter characters?
 ? Mako Sytanx-Highlighting for Geany
 ? How to add days in datetime field in email template(mako template)?
 ? Includ mako file once page is loaded
 ? Is it possible to include pyramid modules in template file(in python code block)?
 ? How to do pagination in python mako