Elep

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package wishful-blog
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'wishful-blog' ); ?></a>

<?php

if( function_exists( 'wp_body_open' ) ) {
    wp_body_open();
} else {
    do_action( 'wp_body_open' );
}
//Header Section : template-functions
// wishful_blog_header_template();
//Header Section Ends

?>
<nav class="navbar navbar-expand-md main-nav">
    <a class="navbar-brand" href="/">
        <img src="/images/logo-large.png" alt="logo" class="logo">
    </a>
    
	<div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="/blog">Home</a>
            </li>
        </ul>
    </div>
</nav>
<script>
	var sideMenu = document.querySelector('#menu-1');
	var docBody = document.querySelector('body');
	// to store the corresponding effect
	var effect;

// adding a click event to all the buttons
	document.querySelector('.navbar-toggler').addEventListener('click', addClass);
	document.querySelector('.close-side').addEventListener('click', closeSide);

function addClass(e) {
		// to get the correct effect
		e.stopPropagation();
		console.log('HERE')
		effect = e.target.getAttribute('data-effect');
		// adding the effects
		sideMenu.classList.add('st-menu-open');
		// docBody.style.overflow = "hidden";
	}

function closeSide(e) {
		e && e.preventDefault();
		sideMenu.classList.remove('st-menu-open');
	}

window.addEventListener('click', e => {
		if(e.target != sideMenu){
			closeSide();
			// docBody.style.overflow = "visible";
		}
	});
</script>
<div class="main-container">
    <main class="site-main">