Fixed header style

src/components/Nav/Header.module.scss

@@ -481,7 +481,7 @@
 
   @include media-breakpoint-up(lg) {
     margin-left: 0.5em !important;
-    margin-right: 0;
+    margin-right: 0.5em;
     width: auto;
 
     .icon {
@@ -497,21 +497,18 @@
     }
   }
 
-  &,
   a::before {
-    border-radius: 1.2em !important;
+    display: none;
   }
 
-  button:hover,
-  a:hover {
-    background-color: var(--link-hover-background);
-    color: var(--link-hover-color);
-
+  a:hover,
+  button:hover {
     .icon {
       filter: invert(0);
     }
 
     .textLabel {
+      background-color: var(--link-hover-background);
       color: var(--link-hover-color);
     }
   }

src/components/Nav/Topics.scss

@@ -1,9 +1,8 @@
 .subnavigation {
-  @include font-size(1.5rem);
-
-  height: 3em;
-  line-height: 3em;
-  margin-bottom: 1.2rem !important;
+  @include font-size(1.4rem);
+  height: 6rem;
+  line-height: 6rem;
+  margin-bottom: 5rem !important;
   overflow: hidden;
   position: relative;
 
@@ -14,22 +13,37 @@
   .topics {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
     list-style: none;
-    margin-right: 2.2rem;
     margin-top: 0;
-    padding: 0;
+    padding: 0 7em 0 0;
+    position: relative;
   }
 
   .item {
     margin-right: 2.4rem;
 
-    &:last-child {
+    &.right {
       margin-right: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
     }
 
     a {
       border-bottom: 0;
+
+      &:hover {
+        .icon {
+          filter: invert(1);
+        }
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      margin-left: 0.3em;
+      position: relative;
+      top: 0.15em;
     }
   }
 

src/components/Nav/Topics.tsx

@@ -25,8 +25,8 @@ export const NavTopics = (props: { topics: Topic[] }) => {
           <li class="item right">
             <a href={`/topics`}>
               <span>
-                <Icon name="arrow-right-black" style={{ height: '12px', display: 'inline-block' }} />
-                <small style={{ margin: '4px' }}>{t('All topics')} </small>
+                {t('All topics')}
+                <Icon name="arrow-right-black" class={'icon'} />
               </span>
             </a>
           </li>

src/components/_shared/PageLayout.module.scss

@@ -1,3 +1,3 @@
 .withPadding {
-  padding-top: 100px;
+  padding-top: 58px;
 }

src/styles/app.scss

@@ -561,7 +561,7 @@ figure {
 
   li {
     display: inline-block;
-    margin-right: 2rem;
+    margin-right: 2.4rem;
     margin-bottom: 0.6em;
 
     @include media-breakpoint-down(md) {