have to fix position and displaying of notifications system

index.html

@@ -23,10 +23,12 @@
                         <li><a href="html/contact.html">contact</a></li>
 
                         <div>
-                            <img src="assets/bell.png" alt="bell" class="bell"> 
+                            <img src="assets/bell.png" alt="bell" id="bell">
+                            <img src="assets/klipartz.com.png" alt="klipartz" id="klipartz"> 
                         </div>
-                    </ul>
-
+
+
+                </ul>         
             </nav>
 
 

style/nav-bar.css

@@ -27,12 +27,14 @@ body {
 
 nav.desk ul {
     list-style: none;
-    width: 70%;
-    height: 55px;
+    width: 80%;
+    height: 60px;
     margin: 0 auto;
+
     display: flex;
     justify-content: space-around;
     align-items: center;
+    padding: 2px 0;
 
 }
 
@@ -41,7 +43,7 @@ nav.mob ul li {
     display: flex;
     justify-content: center;
     align-items: center;
-
+    margin: 0;
     height: 100%;
     width: 100%;
     text-transform: uppercase;
@@ -79,9 +81,13 @@ nav ul li a {
 nav ul div{
 
     position: relative;
+    display: grid;
+
+
+    top:100%;
+
+    padding: 0 0%;
     border-radius: 5px;
-    left: 20%;
-    padding: 0 2%;
 
 }
 
@@ -90,19 +96,32 @@ nav ul div:hover{
     background-color: rgba(255, 255, 255, 0.073);
 }
 
-.bell{
+#bell{
 
-    height: 30px;
+    height: 40px;
 }
 
-.bell:hover{
-    
+#bell:hover{
+
     position: relative;
     scale: 1.2;
     border-radius: 5px;
 
+
 }
 
+#klipartz{
+
+    position: relative;
+    width: 350px;
+    height: auto;
+    left: -80%;
+    -webkit-transform: scaleX(-1);
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    transform: scaleX(-1);
+
+}
 
 /* Mobile Navigation */
 .mob {