//get the ID of the header element
var header = document.getElementById("header");

//Add the logo image, instagram link, and nav menu to the header
header.innerHTML += "<span class='navButton' style='font-size:40px;cursor:pointer' onclick='openNav()'>&#9776;</span>";
header.innerHTML += "<img src='website_pictures/logo.png' class='headerLogo' />";
header.innerHTML += "<a target='_blank' href='https://www.instagram.com/georgenjacksonlimited/'><img src='website_pictures/iglogo.png' class='headerIGLogo' /></a>";


//get the ID of the footer element
var footer = document.getElementById("footer");

//Add the locations to the footer
footer.innerHTML = "<br><hr><p style='padding-right: 5px';>Calgary | Mississauga | Vancouver | Winnipeg</p>";

//get the ID of the header element
var navBar = document.getElementById('navBar');

html = "<a href='javascript:void(0)' class='closebtn' onclick='closeNav()'>×</a>";   
html += "<ul id='menu'>";
html += "<li><a href='index.html'>Home</a></li>";
html += "<li><a href='fabrics.html'>Drapery Fabrics</a></li>";
html += "<li><a href='vendors.html'>Vendors</a></li>";
html += "</ul>";

navBar.innerHTML = html;

function openNav() {
    document.getElementById('navBar').style.width = "300px";
    // document.getElementById('navBar').style.display = "block";
}

function closeNav() {
    document.getElementById('navBar').style.width = "0";
    // document.getElementById('navBar').style.display = "none";
}