Hamburger Test

This is a test to use the hamburger menu and be able to show Selmer Bot on mobile and tablet screens. It is not fully functional yet as it has to media query for specific size values better.
This commit is contained in:
a-box31
2022-11-29 16:41:09 -05:00
parent f75ddfe6e2
commit ade281602f
2 changed files with 228 additions and 122 deletions
+31
View File
@@ -179,12 +179,43 @@
<header>
<div class="main-header">
<nav class="navigation">
<div class="logo">
<a class="navbar-brand" href="/">
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
</a>
<a href="#"><h1 class="brand-name brand-name-large">Selmer Bot<h1></a>
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>
<a href="myGuilds" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
</li>
<li>
<a href="calendar" id="callink" class="nav-link"><i class="fa-solid fa-calendar" alt="Calendar" style="scale: 2; color: lightgrey;"></i></a>
</li>
<li>
<a href="https://docs.selmerbot.com" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
</li>
<li>
<a href="premium" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
</li>
<li>
<a href="team" class="nav-link"><i class="fa-solid fa-user-gear" style="scale: 2; color: rgb(12, 216, 5);" alt="AUTHOR"></i></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="banner-area">