Pills

.idea/workspace.xml

@@ -61,7 +61,7 @@
       <updated>1679674447095</updated>
       <workItem from="1679674448294" duration="3278000" />
       <workItem from="1679754546660" duration="3762000" />
-      <workItem from="1679776338023" duration="7774000" />
+      <workItem from="1679776338023" duration="8024000" />
     </task>
     <servers />
   </component>

index.html

@@ -24,9 +24,8 @@
 
         <!--Mobile-->
         <button onclick="showMobileMenuBar()" id="mobileMenuBarButton">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots"
-                 viewBox="0 0 16 16">
-                <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
             </svg>
         </button>
     </nav>
@@ -36,6 +35,8 @@
 <menu id="mobileMenuBar">
     <div>
         <ul>
+            <li class="highlighted">Home</li>
+
             <li>Games</li>
 
             <li>Quicklinks</li>
@@ -45,6 +46,8 @@
     </div>
 </menu>
 
+<!--Menu Ends here-->
+
 <div class="contentArea">
     <h1 id="mainHeader">We create games like back in the days</h1>
 

navigationStyle.css

@@ -59,9 +59,10 @@ header button:hover {
     background-color: #B6E2A1;
 }
 
-.highlighted
-{
-    color: #F7A4A4;
+@media (min-width: 18.1cm) {
+    .highlighted {
+        color: #F7A4A4;
+    }
 }
 
 /*Mobile Excluded*/
@@ -132,4 +133,9 @@ Mobile
     menu div ul li:hover {
         background-color: #B6E2A1;
     }
+
+    .highlighted
+    {
+        background-color: #B6E2A1;
+    }
 }