black top navbar, styles

src/components/hy-menu-main-group/hy-menu-main-group.scss

@@ -7,6 +7,13 @@
   display: flex;
   flex-flow: row;
   position: relative;
+  margin-left: 28px;
+  @include breakpoint($narrow) {
+    margin-left: 32px;
+  }
+  @include breakpoint($wide) {
+    margin-left: 40px;
+  }
 }
 
 .menu--main-group__toggle {

src/components/site-header/site-header.scss

@@ -101,11 +101,9 @@
   @include breakpoint($narrow) {
     margin: 16px 16px 16px 28px;
   }
-
   @include breakpoint($wide) {
     margin: 16px 24px;
   }
-
   @include breakpoint($extrawide) {
     margin: 16px;
   }
@@ -126,6 +124,20 @@
     display: flex;
     flex-direction: row;
 
+    margin: 12px;
+    @include breakpoint($narrow) {
+      margin: 12px 24px;
+    }
+    @include breakpoint($wide) {
+      margin: 6px 24px;
+    }
+    @include breakpoint($extrawide) {
+      margin: 8px 24px;
+    }
+    @include breakpoint($xlarge) {
+      margin: 8px 32px;
+    }
+
     &:hover {
       color: var(--grayscale-medium);
       a,

src/components/site-header/site-header.tsx

@@ -321,11 +321,16 @@ export class SiteHeader {
             {this.isGroup && (
               <div class="hy-site-header__content-top">
                 <div class={'hy-site-header__logo-container group '}>
-                  <hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
+                  <hy-site-logo
+                    is-group={true}
+                    size={logoSizeGroup}
+                    color={logoColorGroup}
+                    url={this.siteUrl}
+                    label={this.siteLabel}
+                  />
+                  <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
                 </div>
 
-                <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
-
                 <div class={'menu--secondary menu--secondary--group'}>
                   <hy-menu-language
                     class={'menu--secondary__item is-first group'}

src/components/site-header/site-logo/site-logo.scss

@@ -52,20 +52,45 @@
       letter-spacing: -0.7px;
       margin-left: 4px;
     }
+
+    &.group {
+      @include font-size(12px, 14px);
+      color: var(--grayscale-white);
+      letter-spacing: -0.6px;
+      margin-left: 3px;
+
+      @include breakpoint($wide) {
+        @include font-size(14px, 14px);
+        letter-spacing: -0.7px;
+      }
+
+      @include breakpoint($xlarge) {
+        margin-left: 8px;
+      }
+    }
   }
 
-  &__icon svg {
-    height: 32px;
-    width: 33.41px;
+  &__icon {
+    svg {
+      height: 32px;
+      width: 33.41px;
 
-    @include breakpoint($narrow) {
-      height: 48px;
-      width: 51px;
+      @include breakpoint($narrow) {
+        height: 48px;
+        width: 51px;
+      }
+
+      @include breakpoint($xlarge) {
+        height: 60px;
+        width: 64px;
+      }
     }
 
-    @include breakpoint($xlarge) {
-      height: 60px;
-      width: 64px;
+    &.group {
+      svg {
+        height: 32px;
+        width: 34px;
+      }
     }
   }
 

src/components/site-header/site-logo/site-logo.tsx

@@ -24,16 +24,26 @@ export class SiteLogo {
     return this.url ? (
       <Host class={classAttributes}>
         <a href={this.url}>
-          <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
-          <span class={'hy-site-logo__label'} style={{color: this.color}}>
+          <hy-icon
+            class={{'hy-site-logo__icon': true, group: this.isGroup}}
+            icon={'hy-icon-hy-logo'}
+            size={this.size}
+            fill={this.color}
+          />
+          <span class={{'hy-site-logo__label': true, group: this.isGroup}} style={{color: this.color}}>
             {this.label}
           </span>
         </a>
       </Host>
     ) : this.label ? (
       <Host class={classAttributes}>
-        <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
-        <span class={'hy-site-logo__label'} style={{color: this.color}}>
+        <hy-icon
+          class={{'hy-site-logo__icon': true, group: this.isGroup}}
+          icon={'hy-icon-hy-logo'}
+          size={this.size}
+          fill={this.color}
+        />
+        <span class={{'hy-site-logo__label': true, group: this.isGroup}} style={{color: this.color}}>
           {this.label}
         </span>
       </Host>