diff --git a/app/pages/jazz/overview/main.blade.php b/app/pages/jazz/overview/main.blade.php
index 76321bb..05869b2 100644
--- a/app/pages/jazz/overview/main.blade.php
+++ b/app/pages/jazz/overview/main.blade.php
@@ -8,6 +8,7 @@
     <script src="/script/textToSpeech.js" defer></script>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"/>
     <link href="/css/jazzStyles.css" rel="stylesheet">
+    <link href="/css/navBarStyle.css" rel="stylesheet">
 </head>
 <body class="font-montserrat">
 
diff --git a/app/pages/main/mainpage_head.blade.php b/app/pages/main/mainpage_head.blade.php
index 75296a5..a32490f 100644
--- a/app/pages/main/mainpage_head.blade.php
+++ b/app/pages/main/mainpage_head.blade.php
@@ -6,15 +6,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="css/tailwind.css" rel="stylesheet">
-    <style>
-        @media (min-width: 768px) {
-            #stickyNav {
-                position: sticky;
-                top: 0;
-                z-index: 50;
-            }
-        }
-    </style>
 </head>
 
 <body>
diff --git a/app/public/css/navBarStyle.css b/app/public/css/navBarStyle.css
new file mode 100644
index 0000000..a237d36
--- /dev/null
+++ b/app/public/css/navBarStyle.css
@@ -0,0 +1,13 @@
+@media (min-width: 768px) {
+    #stickyNav {
+        position: sticky;
+        top: 0;
+        z-index: 50;
+    }
+}
+
+@media (max-width: 767px) {
+    #stickyNav {
+        position: static;
+    }
+}
