You are viewing version 3 of the library, the latest version is
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
    <div class="container">
        <a class="navbar-brand" href="/">
            <span class="sr-only">Hoofdpagina</span>
            <div class="navbar-brand-container">
                <img src="/v3/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
                <img src="/v3/img/beeldmerkwit.svg" class="logo" aria-hidden="true" alt="">
            </div>
        </a>
        <div class="collapse navbar-collapse" id="navbar-collapse">
        </div>
    </div>
</nav>

Based on the fixed top version from MDB:
https://mdbootstrap.com/components/navbar/#basic-example

Using

Aside from the markup, some extra actions are needed.

  • Since the navbar is fixed top, it’s advisable to add some padding (with a minimum of 74 pixels) to the body element to not risk having content under the navbar which should be visible by default.

Active menu item

To set an active menu item, underneath HTML markup for a navigation item can be used where a class active is added to the active menu item and as and extra addition regarding accessibility the “span” can be used.

<li class="nav-item active">
    <a href="#" class="nav-link">Menu <span class="sr-only">(huidig)</span></a>
</li>

Close mobile menu when clicking outside or when navigate on the same page

Include the script below to enable automatic closing of the menu on a mobile when:

  • A user clicks somewhere outside the menu
  • A user clicks on a link in the menu that scrolls to content on the same page

When using the navbar to scroll to content on the same page make sure to add the class smooth-scroll to the navbar-nav element.

For the autocomplete search a real-time feed is provided by Pandosearch. This uses a combination of search suggestions and direct hits. To use this search functionality, JavaScript code is required before the closing “body” tag.

  • Pandosearch integration
<script>
    var suggestUrl = 'https://public.pandosearch.com/nijmegen.nl/suggest?size=5&q=';

    var autocomplete = new nijmegen.Autocomplete();
    $(document).ready(function () {
        autocomplete.init(getAutocompleteResults, '?q={query}');
    });

    function getAutocompleteResults(query, callback) {
        $.get(suggestUrl + query, function (rawResults) {
            // Get suggestions from raw search results
            var suggestions = rawResults.suggestions
                .map(function (suggestion) {
                    return {
                        title: suggestion.text,
                        url: '?q=' + suggestion.text,
                        class: 'search'
                    };
                });

            // Get hits from raw search results
            var hits = Array.isArray(rawResults.hits)
                ? rawResults.hits
                    .map(function (hit) {
                        return {
                            title: hit.title,
                            url: hit.url
                        };
                    })
                : [];
            var result = [];
            if (hits.length) {
                result = result.concat({ header: 'Zoekresultaten:' }, hits);
            }
            if (suggestions.length) {
                result = result.concat({ header: 'Zoeksuggesties:' }, suggestions);
            }
            callback(result);
        });
    }
</script>

Notes

  • Nijmegen has a collaboration with Pandosearch (https://www.pandosearch.com) for the search and search results implementation, as can be read in the Using section here. For an example of the search results, have a look at the search results template.