Fixing background of input field

frontend/src/components/ItemModel.vue

@@ -38,8 +38,11 @@
           </ul>
         </div>
 
+        <div class="nav-background"/>
+
         <!-- input field -->
 
+        <div class="field-header-box">
           <div class="inputField-header">
             <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder=" " v-model="newItem"
                    @keyup.enter="addItem"/>
@@ -47,6 +50,7 @@
               Add here ...
             </label>
           </div>
+        </div>
 
         <!-- response element -->
 
@@ -215,20 +219,42 @@ body{
   background-color: darkcyan;
 }
 
+/* navbar-background */
+
+.nav-background{
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  background: darkcyan;
+  width: 100vw;
+  height: 15vh;
+}
+
 /* input field styling */
 
-.inputField-header {
+.field-header-box{
   z-index: 3;
   position: fixed;
+  width: 100vw;
+  height: 5vh;
+  left: 0;
+  top: 10vh;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+}
+
+.inputField-header {
+  position: relative;
+  z-index: 5;
   width: 20vh;
-  left: 50%;
-  transform: translateX(-50%);
+  height: 3vh;
 }
 
 .newItemName {
   z-index: 3;
   position: relative;
-  top: -65.5vh; // 0,65 of height
   left: 0;
   width: 100%;
   height: 100%;
@@ -293,9 +319,11 @@ body{
   position: absolute;
   top: 80%;
   left: 50%;
-
+  width: 0;
+  height: 0;
   font-size: 20px;
   margin-left: 30px;
+  border: 1px solid black;
 }
 
 .item-list{
@@ -317,9 +345,7 @@ body{
     font-family: Montserrat, sans-serif;
     list-style: none;
     background: darkslategrey;
-    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6);
     display: flex;
-
     padding: 100px;
     width: 300px;
   }
@@ -394,21 +420,25 @@ body{
   }
 }
 
-@media (max-width: 2299px) {
+@media (max-width: 2100px) {
   .item-list{
-    grid-template-columns: repeat(4, 2vh);
+    grid-template-columns: repeat(7, 2vh);
+  }
+
+  .item{
+    right: 4.1vw;
   }
 }
 
 @media (min-width: 2100px) {
   .item-list{
-    grid-template-columns: repeat(5, 2vh);
+    grid-template-columns: repeat(8, 2vh);
   }
 }
 
 @media (min-width: 2560px) {
   .item-list{
-    grid-template-columns: repeat(6, 2vh);
+    grid-template-columns: repeat(8, 2vh);
   }
 }
 
@@ -441,7 +471,6 @@ body{
 
     row-gap: 50px;
     column-gap: 230px;
-    grid-template-columns: repeat(4, 2vh);
 
     .item{
       width: 200px;
@@ -515,19 +544,6 @@ body{
       cursor: pointer;
     }
   }
-
-  @media (min-width: 1440px) {
-
-    .item-section{
-
-      font-size: 40/3 px;
-      margin-left: 24px;
-    }
-
-    .item-list{
-      grid-template-columns: repeat(9, 2vh)
-    }
-  }
 }
 
 

frontend/src/styling/navbar.scss

@@ -35,15 +35,17 @@
 }
 
 .divider{
+  position: relative;
   flex-grow: 1;
   border-bottom: 0.1vh solid black;
   margin: 5px;
-
+  top: 2vh;
 }
 
 .menu-icon {
   position: relative;
   padding: 0.5vh 0.5vh;
+  top: 2vh;
   cursor: pointer;
   z-index: 1;
   display: none;
@@ -81,7 +83,9 @@
 }
 
 .logo{
+  position: relative;
   padding: 0.5vh 0.5vh;
+  top: 2vh;
 }
 
 .logo:hover {