One-page navigation

Demo

You find a demo with the one-page navigation here.

Guide

Install the extension

Install the extension Onepage Navigation by Erdmann & Freunde with the Contao Manager and update the database.

Create a module

Create a module of type Artikelnavigation (Onepage) and select the template mod_onepage_navigation_nature under Module template.

Create a layout

Create a new layout or duplicate an existing one and select the module you just created under Included modules.

To keep the navigation at the top of the screen when scrolling down, add the following code snippets under Custom JavaScript code and Additional head tags. You can of course also move them to separate files and include the files in the layout.

Custom JavaScript code

<script>
jQuery(document).ready(function($) {
    stuckNavbar();
    
    $(window).scroll(function () {
        stuckNavbar();
    });
    
    function stuckNavbar() {
    	var scrollPos = $(window).scrollTop();
        if (scrollPos > 0) {
            $('.mod_navigation.navbar').addClass('stuck');
        } else {
            $('.mod_navigation.navbar').removeClass('stuck');
        }
    }
});
</script>

Additional head tags

<style>
.mod_navigation.navbar {
    position: fixed;
    transition: all .3s;
    
    &.stuck {
    	height: 70px;
    	
    	.navbar-brand img {
    		max-height: 40px;
    	}
    	
    	.navbar-start {
		    padding: 0 70px;
		}
    }
}
</style>

Assign the layout to the page

Assign the new layout to the page or the website root.

Edit the articles

Create an article for each menu item. In the article settings, tick Add as navigation item under One-page navigation.