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 class="nav-bar">
<div> <div class="mobile-menu-icon">
<a class="logo" href="/"> <a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="logo">
<a href="/">
<img <img
src="../assets/shiloh-logo-white-1.png" src="../assets/shiloh-logo-white-1.png"
alt="Last Hour Hosting Logo" alt="Last Hour Hosting Logo"

40
css/styles.css
View File

@ -335,6 +335,7 @@ a {
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
margin: 1rem; margin: 1rem;
position: relative; /* added this */
} }
.logo { .logo {
@ -376,6 +377,10 @@ a {
width: 100%; width: 100%;
} }
.mobile-menu-icon {
display: none; /* hide the icon on desktop */
}
/* Media query for mobile devices */ /* Media query for mobile devices */
@media (max-width: 600px) { @media (max-width: 600px) {
.nav-bar { .nav-bar {
@ -389,16 +394,41 @@ a {
} }
.menu { .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 { .menu-item {
margin-bottom: 5px; margin-bottom: 5px;
} }
@media all and (max-width: 960px) { .mobile-menu-icon {
.flex-column { display: block; /* show the icon on mobile */
padding: 10px 5px; 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="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="css/styles.css?v=1.0" /> <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/jquery-3.7.1.min.js"></script>
<script src="./js/main.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> </head>
<body> <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");
}