<nav class="navbar is-black is-fixed-top" role="navigation" aria-label="main navigation" id="navbar">

<div class="container">

<!-- logo or branding image on left side -->

<div class="navbar-brand">

<a class="navbar-item"

href="{% if page.layout == 'default' %}{{site.url}}{{site.baseurl}}/#{% else %}{{site.url}}{{site.baseurl}}/{% endif %}">

<strong>{{site.title}}</strong>

</a>

<div class="navbar-burger" data-target="navbar-menu">

<span></span>

<span></span>

<span></span>

</div>

</div>

<!-- children of navbar-menu must be navbar-start and/or navbar-end -->

<div class="navbar-menu has-background-black" id="navbar-menu">

<!-- navbar items | left side -->

<!-- <div class="navbar-start">

<!-- navbar items | right side -->

<div class="navbar-end">

<a class="navbar-item {% if page.layout == 'default' %}is-active{% endif %}"

href="{% if page.layout == 'default' %}{{site.url}}{{site.baseurl}}/#{% else %}{{site.url}}{{site.baseurl}}/{% endif %}">HOME</a>

<a class="navbar-item" href="{{site.url}}{{site.baseurl}}/#about">ABOUT</a>

<a class="navbar-item" href="{{site.url}}{{site.baseurl}}/#contact">CONTACT</a>

<a class="navbar-item {% if page.layout == 'blog' %}is-active{% endif %}"

href="{{site.url}}{{site.baseurl}}/blog">BLOG</a>

{% include dropdown.html %}

</div>

</div>

</div>

document.addEventListener('DOMContentLoaded', function () {

/* Get all "navbar-burger" elements */

var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

/* Check if there are any navbar burgers */

if ($navbarBurgers.length > 0) {

/* Add a click event on each of them */

$navbarBurgers.forEach(function ($el) {

$el.addEventListener('click', function () {

/* Get the target from the "data-target" attribute */

var target = $el.dataset.target;

var $target = document.getElementById(target);

/* Toggle the class on both the "navbar-burger" and the "navbar-menu" */

$el.classList.toggle('is-active');

$target.classList.toggle('is-active');

});

});

}

});