@ons/design-system 72.10.5 → 72.10.6

package/components/chart/example-line-chart-with-axis-min-and-max-values.njk

@@ -0,0 +1,227 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "line",
+        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "alternate",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "legend": true,
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:,.f}",
+            "categories": [
+                'Oct 2014',
+                'Nov 2014',
+                'Dec 2014',
+                'Jan 2015',
+                'Feb 2015',
+                'Mar 2015',
+                'Apr 2015',
+                'May 2015',
+                'Jun 2015',
+                'Jul 2015',
+                'Aug 2015',
+                'Sep 2015',
+                'Oct 2015',
+                'Nov 2015',
+                'Dec 2015',
+                'Jan 2016',
+                'Feb 2016',
+                'Mar 2016',
+                'Apr 2016',
+                'May 2016',
+                'Jun 2016',
+                'Jul 2016',
+                'Aug 2016',
+                'Sep 2016',
+                'Oct 2016',
+                'Nov 2016',
+                'Dec 2016',
+                'Jan 2017',
+                'Feb 2017',
+                'Mar 2017',
+                'Apr 2017',
+                'May 2017',
+                'Jun 2017',
+                'Jul 2017',
+                'Aug 2017',
+                'Sep 2017',
+                'Oct 2017',
+                'Nov 2017',
+                'Dec 2017',
+                'Jan 2018',
+                'Feb 2018',
+                'Mar 2018',
+                'Apr 2018',
+                'May 2018',
+                'Jun 2018',
+                'Jul 2018',
+                'Aug 2018',
+                'Sep 2018',
+                'Oct 2018',
+                'Nov 2018',
+                'Dec 2018',
+                'Jan 2019',
+                'Feb 2019',
+                'Mar 2019',
+                'Apr 2019',
+                'May 2019',
+                'Jun 2019',
+                'Jul 2019',
+                'Aug 2019',
+                'Sep 2019',
+                'Oct 2019',
+                'Nov 2019',
+                'Dec 2019',
+                'Jan 2020',
+                'Feb 2020',
+                'Mar 2020',
+                'Apr 2020',
+                'May 2020',
+                'Jun 2020',
+                'Jul 2020',
+                'Aug 2020',
+                'Sep 2020',
+                'Oct 2020',
+                'Nov 2020',
+                'Dec 2020',
+                'Jan 2021',
+                'Feb 2021',
+                'Mar 2021',
+                'Apr 2021',
+                'May 2021',
+                'Jun 2021',
+                'Jul 2021',
+                'Aug 2021',
+                'Sep 2021',
+                'Oct 2021',
+                'Nov 2021',
+                'Dec 2021',
+                'Jan 2022',
+                'Feb 2022',
+                'Mar 2022',
+                'Apr 2022',
+                'May 2022',
+                'Jun 2022',
+                'Jul 2022',
+                'Aug 2022',
+                'Sep 2022',
+                'Oct 2022',
+                'Nov 2022',
+                'Dec 2022',
+                'Jan 2023',
+                'Feb 2023',
+                'Mar 2023',
+                'Apr 2023',
+                'May 2023',
+                'Jun 2023',
+                'Jul 2023',
+                'Aug 2023',
+                'Sep 2023',
+                'Oct 2023',
+                'Nov 2023',
+                'Dec 2023',
+                'Jan 2024',
+                'Feb 2024',
+                'Mar 2024',
+                'Apr 2024',
+                'May 2024',
+                'Jun 2024',
+                'Jul 2024',
+                'Aug 2024',
+                'Sep 2024',
+                'Oct 2024'
+            ],
+            "tickIntervalDesktop": 15,
+            "tickIntervalMobile": 30
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.f}",
+            "min": -5,
+            "max": 15,
+            "startOnTick": true,
+            "endOnTick": true
+        },
+        "series": [
+            {
+                "name": 'CPIH',
+                "data": [
+                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
+                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
+                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
+                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
+                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
+                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
+                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
+                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
+                ]
+            },
+            {
+                "name": 'Goods',
+                "data": [
+                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
+                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
+                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
+                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
+                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
+                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
+                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
+                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
+                    -1.4, -0.5, -0.9, -1.4, -0.3
+                ]
+            },
+            {
+                "name": 'Services',
+                "data": [
+                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
+                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
+                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
+                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
+                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
+                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
+                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
+                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
+                ]
+            },
+            {
+                "name": 'CPIH excl energy, food, alcohol & tobacco',
+                "data": [
+                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
+                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
+                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
+                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
+                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
+                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
+                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
+                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
+                ]
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/chart/example-scatter-chart-with-axis-min-and-max-values.njk

@@ -0,0 +1,98 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "scatter",
+        "description": "Example scatter chart",
+        "theme": "alternate",
+        "title": "Example scatter chart",
+        "subtitle": "Scatter chart subtitle",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "xAxis": {
+            "title": "Height",
+            "min": 155,
+            "max": 195,
+            "startOnTick": true,
+            "endOnTick": true
+        },
+        "yAxis": {
+            "title": "Weight",
+            "min": 40,
+            "max": 90,
+            "startOnTick": true,
+            "endOnTick": true
+        },
+        "legend": true,
+        "series": [
+            {
+                "name": "Female",
+                "data": [
+                    [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
+                    [163.8, 54.5], [158.4, 50.8], [165.2, 57.3], [160.7, 52.4],
+                    [162.3, 55.1], [166.8, 58.7], [159.8, 51.9], [164.5, 56.2],
+                    [158.9, 50.3], [163.1, 53.8],
+                    [161.8, 52.1], [167.1, 58.8], [159.2, 49.8], [157.4, 62.7],
+                    [163.5, 54.9], [158.7, 51.2], [165.5, 57.8], [160.4, 52.7],
+                    [162.7, 55.4], [166.4, 58.4], [159.4, 51.5], [164.8, 56.5],
+                    [158.6, 50.6], [163.4, 53.5]
+                ]
+            },
+            {
+                "name": "Male",
+                "data": [
+                    [174.0, 65.6], [175.3, 71.8], [187.5, 80.7], [186.5, 72.6],
+                    [178.2, 68.4], [182.7, 74.3], [176.8, 67.9], [188.4, 77.2],
+                    [184.5, 73.8], [179.6, 70.5], [186.2, 79.4], [183.8, 75.1],
+                    [177.4, 69.2], [185.9, 76.3],
+                    [174.3, 66.1], [175.8, 71.4], [187.8, 80.2], [186.1, 72.9],
+                    [178.7, 68.8], [182.2, 74.7], [176.4, 67.5], [188.0, 77.6],
+                    [184.1, 73.4], [179.2, 70.8], [186.6, 79.8], [183.4, 75.4],
+                    [177.8, 69.6], [185.5, 76.7]
+                ]
+            },
+            {
+                "name": "Adolescent Male",
+                "data": [
+                    [168.5, 58.2], [171.2, 62.4], [169.8, 59.7], [173.4, 63.8],
+                    [170.6, 61.2], [172.8, 64.5], [167.9, 57.8], [174.2, 65.1],
+                    [169.5, 60.3], [171.8, 63.2],
+                    [168.8, 58.6], [171.5, 62.8], [169.2, 59.4], [173.7, 63.5],
+                    [170.2, 61.6], [172.4, 64.2], [168.2, 58.1], [173.9, 64.8],
+                    [169.8, 60.7], [171.4, 63.6]
+                ]
+            },
+            {
+                "name": "Adolescent Female",
+                "data": [
+                    [164.2, 54.8], [166.5, 57.2], [163.8, 53.9], [165.7, 56.4],
+                    [162.9, 52.8], [167.2, 58.1], [164.8, 55.3], [166.9, 57.8],
+                    [163.5, 53.4], [165.4, 56.7],
+                    [164.5, 55.1], [166.2, 57.5], [163.4, 53.6], [165.9, 56.2],
+                    [162.6, 52.5], [167.5, 58.4], [164.4, 55.6], [166.6, 57.6],
+                    [163.8, 53.7], [165.2, 56.9]
+                ]
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/chart/specific-chart-options.js

@@ -15,9 +15,28 @@ class SpecificChartOptions {
             },
             yAxis: {
                 tickInterval: yAxisTickInterval,
+                // Configure the minimum and maximum value shown on the y-axis.
+                // If not set in the config, it is set to undefined which is Highcharts default value.
+                min: this.config.yAxis?.min ?? undefined,
+                max: this.config.yAxis?.max ?? undefined,
+
+                // Controls whether the y-axis starts and/or ends exactly on a tick mark.
+                // Highcharts defaults to `true` for both startOnTick and endOnTick on y-axes.
+                startOnTick: this.config.yAxis?.startOnTick ?? true,
+                endOnTick: this.config.yAxis?.endOnTick ?? true,
             },
+
             xAxis: {
                 tickInterval: xAxisTickInterval,
+                // Configure the minimum and maximum value shown on the x-axis.
+                // If not set in the config, it is set to undefined which is Highcharts default value.
+                min: this.config.xAxis?.min ?? undefined,
+                max: this.config.xAxis?.max ?? undefined,
+
+                // Controls whether the x-axis starts and/or ends exactly on a tick mark.
+                // Highcharts defaults to `false` for both startOnTick and endOnTick on x-axes.
+                startOnTick: this.config.xAxis?.startOnTick ?? false,
+                endOnTick: this.config.xAxis?.endOnTick ?? false,
             },
         };
     }

package/components/details-panel/_details-panel.scss

@@ -124,4 +124,8 @@
     &__content-heading {
         color: var(--ons-color-black);
     }
+
+    &__content-description {
+        margin-left: 0;
+    }
 }

package/components/details-panel/_macro.njk

@@ -4,15 +4,15 @@
 
     <details class="ons-details-panel" {% if params.open %}{{ ' ' }}data-open{% endif %}>
         <summary class="ons-details-panel__banner ons-u-pt-s ons-u-pb-s">
-            <div class="ons-container ons-details-panel__banner-contents">
+            <span class="ons-container ons-details-panel__banner-contents">
                 <span class="ons-details-panel__info-icon ons-u-mr-2xs" aria-hidden="true">i</span>
-                <div class="ons-details-panel__banner-body">
+                <span class="ons-details-panel__banner-body">
                     {% set titleTag = params.headingLevel | default(2) %}
                     {% set openingTag = "<h" ~ titleTag %}
                     {% set closingTag = "</h" ~ titleTag ~ ">" %}
                     {{ openingTag | safe }}
                     class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
-                    <div class="ons-details-panel__banner-detail">
+                    <span class="ons-details-panel__banner-detail">
                         <span class="ons-details-panel__banner-detail-title ons-u-mr-3xs">
                             <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
                             <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
@@ -25,27 +25,31 @@
                                 })
                             }}
                         </span>
-                    </div>
-                </div>
-            </div>
+                    </span>
+                </span>
+            </span>
         </summary>
-        <div class="ons-container ons-details-panel__content ons-u-pt-xl ons-u-pb-3xl">
+        <dl class="ons-container ons-details-panel__content ons-u-pt-xl ons-u-pb-3xl">
             {% for item in params.detailsItems %}
                 <div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
-                    <div class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
+                    <dt class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
                         <h3 class="ons-details-panel__content-heading ons-u-fs-r--b ons-u-mb-no">{{ item.text }}</h3>
                         <time class="ons-details-panel__content-date" datetime="{{ item.date.iso }}">{{ item.date.short }}</time>
-                    </div>
-                    <div class="ons-details-panel__content-description">
+                    </dt>
+                    <dd class="ons-details-panel__content-description">
                         <div class="ons-details-panel__content-text ons-u-mb-s">{{ item.description | safe }}</div>
                         {% if item.url or item.text == 'Content' %}
-                            <a class="ons-details-panel__content-url" href="{{ item.url }}">
+                            <a
+                                class="ons-details-panel__content-url"
+                                href="{{ item.url }}"
+                                {% if item.urlAriaLabel %}aria-label="{{ item.urlAriaLabel }}"{% endif %}
+                            >
                                 {{ item.urlText | default("View superseded version") }}
                             </a>
                         {% endif %}
-                    </div>
+                    </dd>
                 </div>
             {% endfor %}
-        </div>
+        </dl>
     </details>
 {% endmacro %}

package/components/details-panel/_macro.spec.js

@@ -71,6 +71,23 @@ describe('FOR: Macro: Details Panel', () => {
                 expect(correctionLinkText).toBe('View superseded version');
                 expect(correctionLinkUrl).toBe('#0');
             });
+            test('THEN: item with urlAriaLabel has custom aria label', () => {
+                const customParams = {
+                    ...EXAMPLE_DETAILS_PANEL,
+                    detailsItems: [
+                        {
+                            ...EXAMPLE_DETAILS_PANEL.detailsItems[0],
+                            urlAriaLabel: 'View superseded version from January 2025',
+                        },
+                        ...EXAMPLE_DETAILS_PANEL.detailsItems.slice(1),
+                    ],
+                };
+                const $ = cheerio.load(renderComponent('details-panel', customParams));
+                const linkWithAriaLabel = $('.ons-details-panel__content-url').eq(0);
+
+                expect(linkWithAriaLabel.attr('aria-label')).toBe('View superseded version from January 2025');
+                expect(linkWithAriaLabel.text().trim()).toBe('View superseded version');
+            });
         });
     });
 });

package/components/details-panel/example-details-panel-open.njk

@@ -13,7 +13,8 @@
                 },
                 "description": '<p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A weighting error means these data have now been revised, with the overall impact being minimal.</p>
                 <p>ONS apologises for any inconvenience caused.</p>',
-                "url": '#0'
+                "url": '#0',
+                "urlAriaLabel": 'View superseded version of this publication'
             },
             {
                 "text": 'Notice',

package/components/details-panel/example-details-panel.njk

@@ -13,7 +13,8 @@
                 },
                 "description": '<p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A weighting error means these data have now been revised, with the overall impact being minimal.</p>
                 <p>ONS apologises for any inconvenience caused.</p>',
-                "url": '#0'
+                "url": '#0',
+                "urlAriaLabel": 'View superseded version of this publication'
             },
             {
                 "text": 'Notice',

package/components/header/_header.scss

@@ -65,6 +65,15 @@
             margin: 0 0 1rem;
         }
     }
+
+    &__language {
+        display: none;
+
+        .ons-js-enabled & {
+            display: block;
+        }
+    }
+
     // Modifier - variants
     &--description {
         .ons-header {
@@ -169,13 +178,13 @@
     }
 
     &__org-logo--large {
-        @include mq('2xs', 460px) {
+        @include mq('2xs', 590px) {
             display: none;
         }
     }
 
     &__org-logo--small {
-        @include mq(461px) {
+        @include mq(591px) {
             display: none;
         }
     }
@@ -245,6 +254,16 @@
 
             #{$root}__menu-links {
                 width: 100%;
+
+                #{$root}__language {
+                    display: block;
+                    padding-top: 1rem;
+
+                    // hide the language switcher within nav when js is enabled
+                    .ons-js-enabled & {
+                        display: none;
+                    }
+                }
             }
 
             // When JS is enabled, revert the no-js styles
@@ -260,26 +279,11 @@
     }
 
     &-nav-menu {
-        // applies styles for non-js variant
-        background-color: var(--ons-color-branded-tint);
-        border-bottom: 1px solid var(--ons-color-ocean-blue);
         margin-bottom: 0;
-        padding-bottom: 1rem;
+        padding-bottom: 2.5rem;
         position: relative;
         width: 100%;
 
-        // updates styles when js is enabled
-        .ons-js-enabled & {
-            border-bottom: 0;
-            margin-bottom: 1rem;
-            padding-bottom: 0;
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            width: 100vw;
-            transform: translateX(-50%);
-        }
-
         &__key-list {
             border-bottom: 1px solid var(--ons-color-ocean-blue);
             margin-bottom: 1.25rem;
@@ -312,14 +316,14 @@
         }
     }
 
+    // applies styles for non-js variant
+    &-nav-menu ~ &-nav-search {
+        border-top: 1px solid var(--ons-color-ocean-blue);
+    }
+
+    &-nav-menu,
     &-nav-search {
         background-color: var(--ons-color-branded-tint);
-        margin-bottom: 1rem;
-        @extend .ons-u-pt-2xl;
-        @extend .ons-u-pb-2xl;
-
-        position: relative;
-        width: 100%;
 
         // updates styles when js is enabled
         .ons-js-enabled & {
@@ -328,7 +332,19 @@
             left: 50%;
             width: 100vw;
             transform: translateX(-50%);
+            border-top: 0;
+            z-index: 500;
         }
+    }
+
+    &__menu-links ~ &__links {
+        padding-bottom: 0.25rem;
+    }
+
+    &-nav-search {
+        @extend .ons-u-pt-2xl;
+        @extend .ons-u-pb-2xl;
+
         &__input {
             border-bottom: 1px solid var(--ons-color-ocean-blue);
             @extend .ons-u-mb-2xl;