Fix desktop nav in mobile

paty-oliveira · paty-oliveira · commit 30bcd5708a7c · 2023-08-08T14:53:37.000+01:00
diff --git a/src/index.html b/src/index.html
@@ -17,7 +17,6 @@
 
   <body>
     <!-- Navbar -->
-    <!-- TODO: Fix Issue, Nav Buttons Don't Work (Desktop & Mobile) -->
     <nav class="top">
       <div class="bar blue card left-align large">
         <a
@@ -28,7 +27,6 @@
           title="Toggle Navigation Menu"
           ><i class="fa fa-bars"></i
         ></a>
-        <!-- TODO: Fix Issue, Desktop Nav Is Visible on Mobile -->
         <a
           id="nav-logo"
           class="bar-item button padding-large white"
@@ -37,13 +35,13 @@
         >
         <a
           id="nav-challenges"
-          class="bar-item button padding-large hover-white"
+          class="bar-item button padding-large hover-white hide-small"
           href="#challenges"
           >Browse Challenges</a
         >
         <a
           id="nav-signup"
-          class="bar-item button padding-large hover-white"
+          class="bar-item button padding-large hover-white hide-small"
           href="#signup"
           >Sign Up</a
         >
diff --git a/src/styles.css b/src/styles.css
@@ -536,7 +536,7 @@ form > span {
 .col.s12 {
   width: 99.99999%;
 }
-@media (min-width: 601px) {
+@media screen and (min-width: 601px) {
   .col.m1 {
     width: 8.33333%;
   }
@@ -579,7 +579,7 @@ form > span {
     width: 99.99999%;
   }
 }
-@media (min-width: 993px) {
+@media screen and (min-width: 993px) {
   .col.l1 {
     width: 8.33333%;
   }
@@ -661,7 +661,7 @@ form > span {
 .show-inline-block {
   display: inline-block !important;
 }
-@media (max-width: 1205px) {
+@media screen and (max-width: 1205px) {
   .auto {
     max-width: 95%;
   }
@@ -672,7 +672,7 @@ form > span {
   /* TODO: Invert banner colors using CSS */
 }
 
-@media (max-width: 600px) {
+@media screen and (max-width: 600px) {
   .modal-content {
     margin: 0 10px;
     width: auto !important;
@@ -705,15 +705,15 @@ form > span {
     width: 100%;
   }
 }
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
   .modal-content {
     width: 500px;
   }
   .modal {
     padding-top: 50px;
   }
 }
-@media (min-width: 993px) {
+@media screen and (min-width: 993px) {
   .modal-content {
     width: 900px;
   }
@@ -724,12 +724,12 @@ form > span {
     display: block !important;
   }
 }
-@media (max-width: 992px) and (min-width: 601px) {
+@media screen and (max-width: 992px) and (min-width: 601px) {
   .hide-medium {
     display: none !important;
   }
 }
-@media (max-width: 992px) {
+@media screen and (max-width: 992px) {
   .sidebar.collapse {
     display: none;
   }

Original file line number	Diff line number	Diff line change
`@@ -536,7 +536,7 @@ form > span {`
`536`	`536`	`.col.s12 {`
`537`	`537`	`width: 99.99999%;`
`538`	`538`	`}`
`539`		`-@media (min-width: 601px) {`
	`539`	`+@media screen and (min-width: 601px) {`
`540`	`540`	`.col.m1 {`
`541`	`541`	`width: 8.33333%;`
`542`	`542`	`}`
`@@ -579,7 +579,7 @@ form > span {`
`579`	`579`	`width: 99.99999%;`
`580`	`580`	`}`
`581`	`581`	`}`
`582`		`-@media (min-width: 993px) {`
	`582`	`+@media screen and (min-width: 993px) {`
`583`	`583`	`.col.l1 {`
`584`	`584`	`width: 8.33333%;`
`585`	`585`	`}`
`@@ -661,7 +661,7 @@ form > span {`
`661`	`661`	`.show-inline-block {`
`662`	`662`	`display: inline-block !important;`
`663`	`663`	`}`
`664`		`-@media (max-width: 1205px) {`
	`664`	`+@media screen and (max-width: 1205px) {`
`665`	`665`	`.auto {`
`666`	`666`	`max-width: 95%;`
`667`	`667`	`}`
`@@ -672,7 +672,7 @@ form > span {`
`672`	`672`	`/* TODO: Invert banner colors using CSS */`
`673`	`673`	`}`
`674`	`674`
`675`		`-@media (max-width: 600px) {`
	`675`	`+@media screen and (max-width: 600px) {`
`676`	`676`	`.modal-content {`
`677`	`677`	`margin: 0 10px;`
`678`	`678`	`width: auto !important;`
`@@ -705,15 +705,15 @@ form > span {`
`705`	`705`	`width: 100%;`
`706`	`706`	`}`
`707`	`707`	`}`
`708`		`-@media (max-width: 768px) {`
	`708`	`+@media screen and (max-width: 768px) {`
`709`	`709`	`.modal-content {`
`710`	`710`	`width: 500px;`
`711`	`711`	`}`
`712`	`712`	`.modal {`
`713`	`713`	`padding-top: 50px;`
`714`	`714`	`}`
`715`	`715`	`}`
`716`		`-@media (min-width: 993px) {`
	`716`	`+@media screen and (min-width: 993px) {`
`717`	`717`	`.modal-content {`
`718`	`718`	`width: 900px;`
`719`	`719`	`}`
`@@ -724,12 +724,12 @@ form > span {`
`724`	`724`	`display: block !important;`
`725`	`725`	`}`
`726`	`726`	`}`
`727`		`-@media (max-width: 992px) and (min-width: 601px) {`
	`727`	`+@media screen and (max-width: 992px) and (min-width: 601px) {`
`728`	`728`	`.hide-medium {`
`729`	`729`	`display: none !important;`
`730`	`730`	`}`
`731`	`731`	`}`
`732`		`-@media (max-width: 992px) {`
	`732`	`+@media screen and (max-width: 992px) {`
`733`	`733`	`.sidebar.collapse {`
`734`	`734`	`display: none;`
`735`	`735`	`}`