How to preserve space between navbar and content accessing # links

With UIkit 3.0 when you have sticky navbar and you access to server.html#something link, you get the content under the navbar. You can see this behaviour in official page: accessing to https://getuikit.com/docs/introduction#uikit-autocomplete-for-your-editor, the "UIkit autocomplete for your editor" section in covered by navbar.

This behaviour does not happen in bootstrap 4 for example: accessing to http://getbootstrap.com/docs/4.1/components/collapse/#accordion-example does not cover section "Accordion example"

How can I emulate the bottstrap behaviour in UIkit

Solution

They use a trick with before pseudo-class. You assign a height and negative top margin, so it doesn't hold up any visual space and the content will look the same, but when a page is loaded with specific anchor, it scrolls to proper position with correct top padding. height and margin-top should be more than or equal to the height of your header

To target only headings you are linking to, use [id] (targets all <hX id="something"></hX>), but maybe it's a good idea to prepend those headings with a class of your content if you want this behaviour only on same subpages.

h1[id]::before,
h2[id]::before,
h3[id]::before,
h4[id]::before {
    display: block;
    height: 80px;
    margin-top: -80px;
    visibility: hidden;
    content: "";
}

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>


<nav class="uk-navbar-container" uk-navbar uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li><a href="#h1-heading">H1</a></li>
            <li><a href="#h2-heading">H2</a></li>
            <li><a href="#h3-heading">H3</a></li>
        </ul>

    </div>
</nav>

<article class="uk-article">

    <h1 id="h1-heading"><a class="uk-link-reset" href="#h1-heading">H1 Heading</a></h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h2 id="h2-heading"><a class="uk-link-reset" href="#h2-heading">H2 Heading</a></h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h3 id="h3-heading"><a class="uk-link-reset" href="#h3-heading">H3 Heading</a></h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h4>Some additional text for h3 example, no anchor tag here</h4>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>