adds height of auto, applies new method to display nav and banner

styles/_top-banner.scss

@@ -51,27 +51,9 @@
   }
 }
 
-body {
-  padding-top: 46px;
-}
-
 .top-nav {
-  @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
-  }
+    position: sticky;
+    width: 100%;
 }
 
 .right-sidebar,

styles/_top-nav.scss

@@ -12,41 +12,31 @@
   align-items: center;
   display: flex;
 }
-#apex-banner {
+.banner-container {
+  display: block;
   width: 100%;
-  @include media-breakpoint-only(xs) {
-    content: url(../img/apex-banner-sm.png);
-    height: 46px;
-  }
+  position: relative; // Or use 'static' if you don't need to position child elements relatively
 
-  @include media-breakpoint-only(sm) {
-    content: url(../img/apex-banner-sm.png);
-    height: 46px;
-  }
+  #apex-banner {
+    width: 100%;
+    height: auto;
 
-  // Medium devices (tablets, 768px and up)
-  @include media-breakpoint-only(md) {
-    content: url(../img/apex-banner-md.png);
-    height: 46px;
-  }
+    @include media-breakpoint-only(xs) {
+      content: url(../img/apex-banner-sm.png);
+    }
 
-  // Large devices (desktops, 992px and up)
-  @include media-breakpoint-up(lg) {
-    content: url(../img/apex-banner.png);
-    height: 40px;
+    @include media-breakpoint-only(sm) {
+      content: url(../img/apex-banner-sm.png);
+    }
+
+    @include media-breakpoint-only(md) {
+      content: url(../img/apex-banner-md.png);
+    }
+
+    @include media-breakpoint-up(lg) {
+      content: 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;
 }
 /* Top navigation ----------------------------------------------------------- */
 .top-nav {

template/component-top-nav.html.jinja

@@ -1,7 +1,5 @@
-<a href="http://register.apexdevsummit.com/cfs" target="_blank class="w-inline-block fixed-top">
-  <div class="fixed-top">
-    <img id="apex-banner" alt="Register for Apex Dev Summit 2023 in Amsterdam."/>
-  </div>
+<a href="http://register.apexdevsummit.com/cfs" target="_blank" class="w-inline-block banner-container">
+  <img id="apex-banner" />
 </a>
 <nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
   <a href="{% if currentpage.prefix %}{{currentpage.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img class="logo"  height="40" alt="{{target.display_name}}" /></a>