Add header top bar section

config/settings_data.json

@@ -65,6 +65,49 @@
     "font_weight_headers": "700",
     "icon_style": "outline",
     "sections": {
+      "top-bar": {
+        "type": "top-bar",
+        "blocks": {
+          "message": {
+            "type": "message",
+            "settings": {
+              "message_icon": "clock",
+              "message": "Mo - Fr, 10 - 18"
+            },
+            "disabled": null
+          },
+          "button": {
+            "type": "button",
+            "settings": {
+              "button_icon": "phone",
+              "button_label": "+1 555 123 4567",
+              "button_url": "tel:+15551234567"
+            },
+            "disabled": null
+          },
+          "menu": {
+            "type": "menu",
+            "settings": {
+              "menu": "main-menu"
+            },
+            "disabled": true
+          }
+        },
+        "block_order": [
+          "message",
+          "button",
+          "menu"
+        ],
+        "settings": {
+          "color_scheme": "set-1",
+          "padding_bottom_desktop": "md",
+          "padding_bottom_mobile": "md",
+          "padding_top_desktop": "md",
+          "padding_top_mobile": "md",
+          "show_bar": false
+        },
+        "disabled": null
+      },
       "header": {
         "type": "header",
         "blocks": {

layout/theme.liquid

@@ -22,7 +22,7 @@
     {%- render 'css-root-variables', settings: settings -%}
 
     {% comment %} Async CSS loading with resource hints {% endcomment %}
-    {%- assign css_files = "critical.css, styles.css, header.css" | split: ", " -%}
+    {%- assign css_files = "critical.css, general.css, header.css" | split: ", " -%}
 
     {%- for css_file in css_files -%}
       {%- assign css_url = css_file | asset_url -%}
@@ -49,6 +49,7 @@
   </head>
   <body>
     <header class="header">
+      {% section 'top-bar' %}
       {% section 'header' %}
     </header>
 

sections/header.liquid

@@ -192,7 +192,7 @@
 
 <div
   class="header__inner{% if sticky_header %} header__inner--sticky{% endif %}{% unless show_transparency %} header__inner--background{% endunless %} header__inner--padding-top header__inner--padding-bottom color-{{- color_scheme.id -}}"
-  {% if variables != blank %} style="{{- variables | escape -}}"{%- endif -%}
+  style="{{- variables | escape -}}"
 >
   <div class="header__container container">
     <div class="header__content{% if header_outline == 'bordered' %} header__content--outlined{%- endif -%}">
@@ -271,7 +271,7 @@
             "label": "Large"
           }
         ],
-        "default": "large"
+        "default": "lg"
       },
       {
         "type": "select",
@@ -291,7 +291,7 @@
             "label": "Large"
           }
         ],
-        "default": "large"
+        "default": "lg"
       },
       {
         "type": "select",
@@ -331,7 +331,7 @@
             "label": "Large"
           }
         ],
-        "default": "medium"
+        "default": "md"
       },
       {
         "type": "select",
@@ -351,7 +351,7 @@
             "label": "Large"
           }
         ],
-        "default": "medium"
+        "default": "md"
       }
     ],
     "blocks": [