Shiloh/shiloh-website
Shiloh/shiloh-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add hamburger menu for mobile

Browse Source
This commit is contained in:
Gary 2024-11-01 16:10:58 -07:00
parent 5431531a9d
commit f7f1cd203e
4 changed files with 52 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/header.html
View File

@ -1,6 +1,12 @@
<script src="./js/navbar.js"></script>
<div class="nav-bar">
<div>
<a class="logo" href="/">
<div class="mobile-menu-icon">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="logo">
<a href="/">
<img
src="../assets/shiloh-logo-white-1.png"
alt="Last Hour Hosting Logo"

40
css/styles.css
View File

@ -335,6 +335,7 @@ a {
align-items: center;
padding: 1rem;
margin: 1rem;
position: relative; /* added this */
}
.logo {
@ -376,6 +377,10 @@ a {
width: 100%;
}
.mobile-menu-icon {
display: none; /* hide the icon on desktop */
}
/* Media query for mobile devices */
@media (max-width: 600px) {
.nav-bar {
@ -389,16 +394,41 @@ a {
}
.menu {
flex-direction: column;
display: none; /* hide the menu on mobile */
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: rgb(0, 0, 0);
padding-top: 10px;
padding-bottom: 10px;
}
.menu-item {
margin-bottom: 5px;
}
@media all and (max-width: 960px) {
.flex-column {
padding: 10px 5px;
}
.mobile-menu-icon {
display: block; /* show the icon on mobile */
position: absolute;
top: 25px;
right: 20px;
font-size: 24px;
cursor: pointer;
transition: font-size 0.1s ease-in-out;
}
.mobile-menu-icon:hover {
font-size: 26px;
}
.show-menu {
display: block;
}
}
@media all and (max-width: 960px) {
.flex-column {
padding: 10px 5px;
}
}

9
index.html
View File

@ -36,12 +36,13 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="css/styles.css?v=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self'; style-src 'self'; object-src 'none'; frame-src 'self'; base-uri 'self'; font-src 'self'; img-src 'self' https://cdn.lasthourhosting.org/ https://status.shilohcode.com; media-src 'self' https://cdn.lasthourhosting.org/shiloh/; "
/>
<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/main.js"></script>
<script src="./js/navbar.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>

4
js/navbar.js Normal file
View File

@ -0,0 +1,4 @@
function myFunction() {
var menu = document.querySelector(".menu");
menu.classList.toggle("show-menu");
}