header complete

assets/js/st-nav.js

@@ -33,6 +33,7 @@ const siteTitle = document.querySelector('.st-site-title');
 const siteTitleBall = document.querySelector('.st-site-title__ball');
 const header = document.querySelector('.st-header');
 const topper = document.querySelector('.st-article-section-topper');
+const desktopNavLinks = document.querySelector('.st-desktop-nav-links');
 let lastScrollPosition = 0;
 const scrollDepthActivationPoint = 80;
 
@@ -45,6 +46,7 @@ window.addEventListener('scroll', function(event) {
         header.classList.remove('st-header-scrolled');
         siteTitleBall.classList.remove('st-title-scrolled__ball');
         topper.classList.remove('st-article-section-topper-scrolled');
+        desktopNavLinks.classList.remove('st-desktop-nav-links-scrolled');
     } else {
         if(lastScrollPosition < scrollDepthActivationPoint) {
             iconBar.classList.add('st-icon-bar-sticky');
@@ -52,6 +54,7 @@ window.addEventListener('scroll', function(event) {
             header.classList.add('st-header-scrolled');
             siteTitleBall.classList.add('st-title-scrolled__ball');
             topper.classList.add('st-article-section-topper-scrolled');
+            desktopNavLinks.classList.add('st-desktop-nav-links-scrolled');
         } 
     }
     

functions.php

@@ -24,7 +24,8 @@ add_action( 'init', 'slowtwitch_menus' );
 function slowtwitch_menus() {
     $locations = array(
         'primary' => 'Primary Menu',
-        'footer' => 'Footer Menu'
+        'footer' => 'Footer Menu',
+        'desktop-nav' => 'Desktop Nav Menu'
     );
 
     register_nav_menus($locations);

header.php

@@ -23,6 +23,17 @@
     <header class="st-header st-main-grid">
 
         <div class="st-header-icon-bar">
+            <?php
+                wp_nav_menu(
+                    array(
+                        'menu' => 'desktop-nav',
+                        'container' => '',
+                        'theme_location' => 'primary',
+                        'items_wrap' => '<ul class="st-desktop-nav-links">%3$s</ul>'
+                    )
+                );
+            ?>
+
             <a href="https://forum.slowtwitch.com" class="st-chip st-chip-primary st-header-icon-bar__item">forum</a>
             <a href="https://shop.slowtwitch.com" class="st-chip st-chip-secondary st-header-icon-bar__item">shop</a> 
             
@@ -32,10 +43,10 @@
 
         <div class="st-site-title-grid">
             <a href="<?php echo home_url() ?>" class="st-site-title-link">
-                <img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-ball-blue.png" alt="Logotype" class="st-site-title__ball">
+                <img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-ball-dark-blue.png" alt="Logotype" class="st-site-title__ball">
             </a>
             <a href="<?php echo home_url() ?>" class="st-site-title-link">
-                <img src="/wp-content/themes/slowtwitch-news/assets/images/logotype-blue.png" alt="Logotype" class="st-site-title">
+                <img src="/wp-content/themes/slowtwitch-news/assets/images/logotype-dark-blue.png" alt="Logotype" class="st-site-title">
             </a>
         </div>
         <nav class="st-nav st-main-grid">

style.css

@@ -224,10 +224,9 @@ SECTIONS
     margin-left: calc((100% - (4 * 62px)) / (4 - 1));
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 760px) {
     .st-header-icon-bar__item {
-        transition: margin 300ms;
+        margin-left: 2em;
-        margin-left: calc((100% - (4 * 62px)) / (4 - 1));
     }
 }
 
@@ -237,13 +236,6 @@ SECTIONS
         transition: margin 300ms;
         margin-left: calc((100% - (4 * 62px)) / (4 - 1));
     }
-    
-    @media (min-width: 1200px) {
-        .st-header-icon-bar__item {
-            transition: margin 300ms;
-            margin-left: calc((100% - (4 * 62px)) / (4 - 1));
-        }
-    }
 }
 
 
@@ -310,6 +302,45 @@ SECTIONS
     }
 }
 
+.st-desktop-nav-links {
+    display: none;
+}
+
+@media (min-width: 760px) {
+    .st-desktop-nav-links {
+        display: flex;
+        padding: 0;
+        list-style: none;
+        margin: 0;
+        margin-right: auto;
+        transition: margin 300ms;
+    }
+
+    .st-desktop-nav-links li {
+        margin-right: 1em;
+    }
+
+    .st-desktop-nav-links li a {
+        text-decoration: none;
+        text-transform: uppercase;
+        color: #0b4fa0;
+    }
+
+    .st-desktop-nav-links li a:hover {
+        color: #FFDB12;
+    }
+
+    .st-desktop-nav-links-scrolled {
+        margin-left: 80px;
+    }
+}
+
+@media (min-width: 1125px) {
+    .st-desktop-nav-links-scrolled {
+        margin-left: 100px;
+    }
+}
+
 /* nav */
 .st-search-overlay,
 .st-nav {