tweaked navbar for mobile devices

xyryc · Aug 3, 2024 · f958aa2 · f958aa2
1 parent f1b16a8
commit f958aa2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -19,19 +19,20 @@
     <header>
       <!-- Navbar -->
       <nav class="container nav-bar">
+        <i class="fa-solid fa-bars" id="navbar-icon"></i>
         <h3>Shutter Shop</h3>
         <div class="nav-options">
           <p>Home</p>
           <p>Products</p>
           <p>Sign Up</p>
           <p>Login</p>
-          <i class="fa-solid fa-magnifying-glass"></i>
-          <i class="fa-brands fa-opencart"></i>
+          <i class="fa-solid fa-magnifying-glass" id="search-icon"></i>
+          <i class="fa-brands fa-opencart" id="cart-icon"></i>
         </div>
       </nav>
 
       <!-- Banner Section -->
-      <div class="container banner">
+      <div class="container banner hide">
         <div class="text-content">
           <h1>Start your Journey as Influencer</h1>
           <p>
@@ -51,12 +52,12 @@ <h1>Start your Journey as Influencer</h1>
 
     <main>
       <!-- Partners section -->
-      <div class="container partners">
+      <div class="container partners hide">
         <img src="images/partners.png" alt="" />
       </div>
 
       <!-- Popular section -->
-      <div class="container popular">
+      <div class="container popular hide">
         <h1>Popular Collection</h1>
         <p class="description">
           Explore our most popular camera accessories, handpicked for their
@@ -217,7 +218,7 @@ <h2>Microphone</h2>
       </div>
 
       <!-- Featured section -->
-      <div class="container featured">
+      <div class="container featured hide">
         <div class="featured-image-container">
           <img src="images/gear.png" alt="" />
         </div>
@@ -234,7 +235,7 @@ <h1>Featured products at one place</h1>
     </main>
 
     <!-- Footer section -->
-    <footer>
+    <footer class="hide">
       <div class="container text-container">
         <h3>Shutter Shop</h3>
         <p>Copyright &copy; 2024 Shutter Shop</p>

diff --git a/styles/gears.css b/styles/gears.css
@@ -323,3 +323,32 @@ footer .social i {
   padding: 0.5rem;
   border-radius: 50%;
 }
+
+/* Hide content */
+.hide {
+  display: none;
+}
+
+#navbar-icon {
+  display: none;
+}
+
+/* Media Queries */
+@media screen and (max-width: 576px) {
+  #navbar-icon {
+    display: inline;
+  }
+
+  .nav-options p {
+    display: none;
+  }
+
+  #search-icon {
+    display: none;
+  }
+
+  .nav-bar {
+    border: 2px solid red;
+    padding-top: 2.1rem;
+  }
+}