This a mock up of Fraybury's personal site with Kalechip's responsive hamburger menu.

It only includes the landing page. To include the menu in other pages, paste the following inside the <nav> tag with the id=topmenu.

`<div id="mobile-nav">
        <details id="burger">
        <summary id="toggle"><h2>Menu</h2></summary>
            <nav id="menu">
                <ul>
                    <li><a href="https://fraybury.nekoweb.org/index.html">Home</a></li>
					<li><a href="https://fraybury.nekoweb.org/analysis.html">Analysis</a></li>
					<li><a href="">Journal</a></li>
					<li><a href="https://fraybury.nekoweb.org/shrine.html">Shrines</a></li>
					<li><a href="">Links</a></li>
					<li><a href="https://fraybury.atabook.org/">Guestbook</a></li>
                </ul>
            </nav>
        </details>
</div>

<div id="desktop-nav">
            <ul>
            <li><a href="https://fraybury.nekoweb.org/index.html">Home</a></li>
            <li><a href="https://fraybury.nekoweb.org/analysis.html">Analysis</a></li>
            <li><a href="">Journal</a></li>
            <li><a href="https://fraybury.nekoweb.org/shrine.html">Shrines</a></li>
            <li><a href="">Links</a></li>
            <li><a href="https://fraybury.atabook.org/">Guestbook</a></li>
        </ul>
    </div>`

Styling for the hamburger menu can be found under the header styling in the stylesheet. Here's a copy of the added code.

`#desktop-nav{
	display: none;
}

#mobile-nav{
	display: flex;
}

#burger {
	width:100%;
	background:var(--lightorange);
	position: fixed;
	display: inline-block;
	left: 0em;
	top: 0;
	z-index:1000;
	height: 3em;
}

#burger summary {
	list-style-type: none;
	cursor: pointer;
	display:flex;
	align-items:left;
	color:var(--toplink);
	padding:5px;
}

#burger summary::before, #burger[open]>summary::before {
	height:35px;
	width:35px;
	background:var(--toplink);
	margin: 0 0.35em;
}

#burger summary::-webkit-details-marker {
	display: none;
}

#burger summary::before {
	content: '';
	mask-image:url(/Fraybury_files/burger.svg);
	-webkit-mask-image:url(/Fraybury_files/burger.svg);
	mask-size:30px;
	-webkit-mask-size:40px;
}

#burger summary h2{
	padding: 2.3px 0;
}

#burger[open]>summary::before {
	content: '';
	mask-image:url(/Fraybury_files/close.svg);
	-webkit-mask-image:url(/Fraybury_files/close.svg);
	mask-size:40px;
	-webkit-mask-size:40px;
}

#burger[open] {
	position:fixed;
}

#burger #menu {
	height:calc(100vh);
	z-index:1000;
	display: flex;
	position:relative;
	overflow:auto;
	background:var(--lightorange);
	justify-items: center;
	flex-direction: column;
	font-size: 2em;
	opacity: 0.85;
}

#burger #menu ul {
	list-style:none;
	margin:0;
	text-align:center;
	color: var(--toplink);
	padding: 20px;
	line-height: 1.5;
}

#burger #menu li{
	position: relative;
	display: block;
	
}

#burger #menu a{
	color: var(--toplink);
	font-family:Arial, Helvetica, sans-serif;
}`

Last but not least, I added two lines under desktop styling:

`#mobile-nav{
	display: none;
}

#desktop-nav{
	display:contents;
}`