Slide in and out navigation

Yes.

At the beginning of your page you have an empty 'container' div which is serving no purpose so use it to insert an icon to open the top menu. I've just used some text and given the div a new class of 'show-nav': (you can use a font-awesome icon or the Bootstrap hamburger icon)

<div class="show-nav">MENU</div>

Add these css selectors to your css styles:

.show-nav {

text-align: right;

padding: 20px 60px;

}

.navbar {

transform: translateX(100%);

transition: all 600ms ease;

}

.slide_nav {

transform: translateX(0);

}

Then add the jQuery below AFTER the link to:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

  <script src="http://michaelguydonphotography.com/js/jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function(){

$('.show-nav').css('cursor' , 'pointer').click(function(){

$('.navbar').addClass('slide_nav');

});

});

</script>