<header

class="sticky-header active border-bottom">
<!-- -Navbar -->

<div class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-white mx-auto">
        <a class="navbar-brand mr-5" href="{{ site.baseurl }}">
            <img height="auto" src="{{ site.baseurl }}/assets/icons/icon.png" width="36px">

                <b class="align-bottom" style="font-size: larger; font-weight:600!important; text-transform: uppercase;">&nbsp
                    {{ site.firstname }}</b>

                <span class="align-bottom" style="font-size: larger; text-transform: uppercase; ">{{ site.secondname }}</span>
            </a>

            <!-- Toggler/collapsibe Button -->

            <button class="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar links -->

            <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    {% for menu_item in site.data.menu %}

                        <li class="nav-item pl-3 pr-3 font-weight-bold">
                            <a href="{{ site.baseurl }}{{ menu_item.href }}" class="nav-link text-gray-dark">{{ menu_item.title }}</a>
                        </li>

                    {% endfor %}

                    <!-- Display only on small devices - xs, sm, md -->
                    <li class="nav-item pl-3 pr-3 font-weight-bold d-block d-lg-none">
                        <a class="nav-link text-gray-dark" href="{{ site.baseurl }}{{ site.resume_link }}" >CV</a> <!-- Change CV to something else in navbar here-->
                    </li>

                    <!-- Display only on big devices lg, xl -->
                    <li class="nav-item pl-3 pr-3 font-weight-bold d-none d-lg-block">
                        <a href="{{ site.baseurl }}/resume.html" class="nav-link text-gray-dark">CV</a> <!-- Change CV to something else in navbar here-->
                    </li>

                </ul>
            </div>

            <ul class="header-social-icons navbar-nav ml-auto d-none d-md-inline-flex ">
                <li class="nav-item mx-auto">
                    <a class="nav-link" href="https://github.com/{{ site.github_username }}" title="View my GitHub profile">
                        <i class="fab fa-github" style="font-size: 2rem; color: #000;"></i>
                    </a>
                </li>

                <li class="nav-item mx-auto">
                    <a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}" title="View my LinkedIn profile">
                        <i class="fab fa-linkedin" style="font-size: 2rem; color: #0077b5;"></i>
                    </a>
                </li>

                <li class="nav-item mx-auto">
                    <a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" title="Tweet at me">
                        <i class="fab fa-twitter" style="font-size: 2rem; color: #55acee;"></i>
                    </a>
                </li>

                <li class="nav-item mx-auto">
                    <a class="nav-link" href="mailto:{{ site.general_email }}" title="Email Me">
                        <i class="fas fa-at" style="font-size: 2rem;"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</header>