responsive semantic navbar 2

index.html

<script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
<header>
        <input type="checkbox" id="toggle-menu">
       <label class="menu-icon" for="toggle-menu">
        <a id="menu-icon">≡</a>
        </label>
      <nav>
            <li><a href=""> Home </a></li>
            <li><a href=""> My Work </a></li>
            <li><a href=""> About  </a></li>
      </nav>  

   <img class ="mainimage" src="https://astroslair.xyz/assets/img/astromainimage.webp" alt="a computer screen displaying 'astro's lair'"\>  
</header>

<main>
  <h1> You find yourself in Astro's Lair.</h1>
  <p> Here's cup of [insert your favorite beverage] ☕! </p>
 <p> A long time ago, corporations did not rule the interwebz. It was a time of creativity, expression, and exploration. This website? It's a love letter to the Internet of yesteryear.</p>
  <p> Hang out for a bit. Look around, play some of my <a href="">games</a>, check out some of the <a href ="">projects</a> that have kept me busy, and leave message (really appreciate those)! </p>
</main>
  
<div class="grid">
  <div id="updatescol"> 
  <h1>Updates!</h1>
  <p><strong>June 12, 2023</strong>Some optimizations, new pages, and more minimal. So minimal that I'm questioning me choosing Bootstrap. All of this could be made using plain old html and css. <em>Maybe that's next...?</em><br><br><strong>June 09, 2023</strong><br>New homepage. Super minimal and if I say so myself, pretty sleek!<br><br><strong>May 24, 2023</strong><br> Another big update!&nbsp;<br>- Yesterweb Ring has been discontinued :(&nbsp;<br>- Added a new commenting system! <a href="https://cactus.chat/">cactus.chat</a>&nbsp;now powers our comment box! It's open-source!<br>- Analytics using <a href="https://umami.is/about">Umami</a>. <em>does not collect any personal information, does not use cookies, does not track users across websites, and is GDPR compliant</em>. Oh, and it's open-source <br>- Astrodex should be live soon <br>- Redesigned the experiments/game page<br>- Updates box looks much neater!<br><br><strong>January 28, 2023</strong><br>BIGGEST update yet! Another rehaul. 💜&nbsp;I should stop rehaul-ing and start making more content honestly. Currently, we have 27k views, whoop.&nbsp;<br><br><strong>December 11, 2022</strong><br>Another major rehaul. This took me longer than I anticipated. Oh, domain (astroslair dot xyz) expired a month ago. I'm still debating on getting a new one/renewing it.&nbsp;<br><br><strong>August 1, 2022</strong><br>Added my (incomplete) 📕 Codex Vitae/blog/digital garden hodgepodge! It replaces the blog that I had earlier.&nbsp;&nbsp;<br><br><strong>June 30, 2022</strong><br>Things didn't go as planned. The June 10th launch did not happen ;~: But hey! New site is now live :D&nbsp;<br><br><strong>June 10, 2022</strong>&nbsp;<br>Major overhaul 2.0 - Electric Boogaloo! Should work even better on mobile now :D Made a ton of changes. Switched to Bootstrap5. Also we're close to 14k views!&nbsp;<br><br><strong>June 7, 2022</strong>&nbsp;<br>We hit 13,000 views?! What? How? Must be bots crawling the site or something.&nbsp; <br><br>Whoop! We're live and it's my birthday! 🥳🎉&nbsp;<br><br><strong>Jan 15, 2022</strong><br>Site Redesign! Major overhaul.&nbsp;<br><br>🍰 <strong>Oct 15, 2021</strong>&nbsp;<br>Site Created!! 🎊</p>
  </div>
  
<div id = "chatbox">
 <div id = "chat">
  <script>
initComments({
  node: document.getElementById("chat"),
  defaultHomeserverUrl: "https://matrix.cactus.chat:8448",
  serverName: "cactus.chat",
  siteName: "astroslair",
  commentSectionId: "homepage"
})
</script>
</div>
  
  </div>

responsive-semantic-navbar-2.markdown

responsive semantic navbar 2

A Pen by TheOrigins on CodePen.

License.

scripts

<script src="https://latest.cactus.chat/cactus.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Koulen&display=swap');

:root {
  background: #000;
}

h1 {
  font-size:2.2em;
  font-family: 'Belanosima';
  text-align: center;
}

p {
  font-family: 'Belanosima';
    text-align: center;

}


header {
    background-color: black;
    font-size:2em;
    font-family: monospace;
}

nav {
    background-color: black;
    color: white;
    cursor: pointer;
    justify-content: center;
    text-align: center;
    font-family: 'Koulen';
}

#menu-icon {
    color: white;
    cursor: pointer;
    display: none;
    font-size:1.75em;
    text-decoration: none;
}

nav a {
  color: white;
}

nav a:hover { 
  color:white;
  background-color:#b70460;
}

#toggle-menu{
    display: none;
}

@media screen and (max-width: 700px) {
 
    nav {
        display: none;
        position: absolute;
        width: 100%;
        text-align: center;
    }
      #menu-icon {
    visibility: visible;
    display: block;
        } 
    .menu-icon {
        z-index: 1;
        visibility: visible;
    }

    #toggle-menu:checked ~ nav {
        display: block;
    }
}

#mainimage img {
  margin-left: auto;
  margin-right: auto;
}

#updatescol {
  display: block;
  overflow-y: scroll;
  /*margin-bottom: 17px;*/
  background: #380940;
  border: 6px pink;
  height: 350px;
  /*margin-top: 10px;*/
}


#chatbox {
  overflow: auto;
 max-height: 350px; 
}

.grid {
  border: 1px;
  margin: 12px;
}


/* cactus chat */
.cactus-comments-list {
	display: flex;
	flex-direction: column;
	gap: .5em
}

.cactus-comment {
	display: flex;
	flex-direction: row;
	gap: 1em;
	padding-block-end: .5em;
}

.cactus-comment-avatar {
	display: flex
}

.cactus-comment-avatar>* {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	margin: 0
}

.cactus-comment-content {
	display: flex;
	flex-direction: column;
	gap: .5em
}

.cactus-comment-header {
	display: flex;
	gap: .5em;
	flex-wrap: wrap
}

.cactus-button {
	align-items: center;
	padding-block: .6em;
	padding-inline: 1em;
	background-color: purple;
	font-weight: 700;
	border-radius: 30px;
	color: var(--cactus-button-text-color);
	font-size: inherit;
}

:root {
  --cactus-text-color: white;
  --cactus-button-color: #d63384 ;
  --cactus-button-text-color: white;
  --cactus-comment-time: white;
}
.cactus-editor-textarea {
  height: 2.5rem;
}


.cactus-login-form {
	display: flex;
	flex-direction: column;
	gap: 2em;
	padding: 2rem;
	border-radius: var(--cactus-border-radius);
	background-color: var(--cactus-background-color--strong);
	color: var(--cactus-login-form-text-color);
	box-shadow: 0 .5em 1em .5em var(--cactus-box-shadow-color);
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 300px
}

.cactus-login-close {
	align-self: flex-end;
	position: relative;
	margin: -2em;
	padding: 0;
	color: var(--cactus-button-color);
	scale: 2;
	background-color: transparent;
	border: none
}

.cactus-login-close:hover:not([disabled]) {
	color: var(--cactus-button-color--strong);
	cursor: pointer
}

.cactus-login-close:active:not([disabled]) {
	color: var(--cactus-button-color--stronger);
	cursor: pointer
}

.cactus-login-close-icon {
	inline-size: 20px;
	block-size: 20px
}

.cactus-login-title {
	align-self: center;
	font-size: 1.17em;
	font-weight: 700;
	margin: 0
}

.cactus-login-client {
	display: flex;
	flex-direction: column;
	gap: 1em
}

.cactus-login-client-title {
	font-size: 1em;
	font-weight: 700;
	margin: 0
}

.cactus-matrixdotto-button {
	justify-content: center;
	text-decoration: none
}

.cactus-login-credentials {
	display: flex;
	flex-direction: column;
	gap: 1em
}

.cactus-login-credentials-title {
	font-size: 1em;
	font-weight: 700;
	margin: 0
}

.cactus-login-field {
	display: flex;
	flex-direction: column;
	gap: .25em
}

.cactus-login-label {
	font-size: 1em;
	padding-bottom: .25em;
	color: var(--cactus-text-color--soft)
}

.cactus-login-error {
	margin: 0;
	font-size: .8em;
	color: var(--cactus-text-color--soft)
}

.cactus-login-field>input {
	border-radius: var(--cactus-border-radius);
	border: solid var(--cactus-border-width) var(--cactus-border-color);
	padding: .5em;
	background-color: transparent;
	color: inherit;
	font-size: inherit
}

.cactus-login-field>input::placeholder {
	color: var(--cactus-text-color--soft)
}

.cactus-login-credentials-button {
	justify-content: center
}

.cactus-comments-container {
	display: flex;
	flex-direction: column;
	gap: 1em;
  text-align: left !important;
}

main {
  margin: 2.2rem;
  padding: 2.2rem;
}

styles

<link href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.min.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />