adds banner for sm md and lg breakpoints

styles/_top-banner.scss

@@ -3,7 +3,7 @@
   background: url(../img/backgrounds/bg-apex-banner.svg);
   background-position: left;
   background-size: cover;
-    background-color: #7919FF;
+  background-color: #7919ff;
   // padding: 2px 0;
   color: #fff;
   text-align: center;
@@ -11,8 +11,6 @@
   font-weight: bold;
   line-height: 24px;
 
-
-
   .btn {
     margin-left: 4px;
     font-size: 12px;
@@ -56,9 +54,26 @@
 body {
   padding-top: 46px;
 }
+
 .top-nav {
-    top: 32px;
+  @include media-breakpoint-only(xs) {
+    top: 43px; // adjust as needed
   }
+  @include media-breakpoint-only(sm) {
+    top: 43px; // adjust as needed
+  }
+
+  // Medium devices (tablets, 768px and up)
+  @include media-breakpoint-only(md) {
+    top: 46px; // adjust as needed
+  }
+
+  // Large devices (desktops, 992px and up)
+  @include media-breakpoint-up(lg) {
+    top: 40px; // adjust as needed
+  }
+}
+
 .right-sidebar,
 .left-sidebar {
   @include media-breakpoint-up(lg) {
@@ -94,7 +109,6 @@ $banner-top-offset: 146px;
 
 html.light {
   .top-banner {
-
     .btn-outline-secondary {
       color: #fff;
       border-color: #fff;
@@ -104,7 +118,5 @@ html.light {
         border-color: #fff;
       }
     }
-
   }
 }
-

styles/_top-nav.scss

@@ -12,28 +12,47 @@
   align-items: center;
   display: flex;
 }
-.marquee-item {
-  width: 6192px;
-  height: 32px;
-  background-image: url(../img/apex-banner.png);
-  background-position: 0%;
-  background-repeat: repeat-x;
-  background-size: auto 32px;
-  flex: none;
-  justify-content: flex-start;
-  align-items: center;
-  display: flex;
-  position: relative;
-  white-space: nowrap;
-  will-change: transform;
-  animation: marquee-horizontal 16s linear infinite;
+#apex-banner {
+  width: 100%;
+  @include media-breakpoint-only(xs) {
+    content: url(../img/apex-banner-sm.png);
+    height: 46px;
+  }
+
+  @include media-breakpoint-only(sm) {
+    content: url(../img/apex-banner-sm.png);
+    height: 46px;
+  }
+
+  // Medium devices (tablets, 768px and up)
+  @include media-breakpoint-only(md) {
+    content: url(../img/apex-banner-md.png);
+    height: 46px;
+  }
+
+  // Large devices (desktops, 992px and up)
+  @include media-breakpoint-up(lg) {
+    content: url(../img/apex-banner.png);
+    height: 40px;
+  }
+  
+  // background-position: 0%;
+  // background-repeat: repeat-x;
+  // background-size: auto 32px;
+  // flex: none;
+  // justify-content: flex-start;
+  // align-items: center;
+  // display: flex;
+  // position: relative;
+  // white-space: nowrap;
+  // will-change: transform;
+  // animation: marquee-horizontal 16s linear infinite;
 }
 /* Top navigation ----------------------------------------------------------- */
 .top-nav {
   background-color: $gray-900;
   height: 80px;
   padding: 0;
-
   // Logo
   .navbar-brand {
     text-decoration: none;

template/component-top-nav.html.jinja

@@ -1,6 +1,6 @@
 <a href="http://register.apexdevsummit.com/cfs" target="_blank class="w-inline-block fixed-top">
-  <div class="marquee-wrap fixed-top">
-    <div class="marquee-item"></div>
+  <div class="fixed-top">
+    <img id="apex-banner"/>
   </div>
 </a>
 <nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">