diff --git a/src/implementations/twig/components/site-header-standardised/site-header-standardised.story.js b/src/implementations/twig/components/site-header-standardised/site-header-standardised.story.js index 01a443fd5a0..4ff65e67aef 100644 --- a/src/implementations/twig/components/site-header-standardised/site-header-standardised.story.js +++ b/src/implementations/twig/components/site-header-standardised/site-header-standardised.story.js @@ -36,8 +36,8 @@ const getArgs = (data) => { }; if (system === 'ec') { args.banner_top = true; - args.cta_link = false; } + args.cta_link = false; return args; }; @@ -80,19 +80,19 @@ const getArgTypes = () => { defaultValue: { summary: '{}' }, }, }; - argTypes.cta_link = { - name: 'call to action', - type: { name: 'boolean' }, - description: 'Call to action link (optional)', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }; } + argTypes.cta_link = { + name: 'call to action', + type: { name: 'boolean' }, + description: 'Call to action link (optional)', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: { + type: 'boolean', + }, + }; argTypes.menu = { type: 'boolean', description: 'Toggle menu visibility', diff --git a/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-ec.scss b/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-ec.scss index 72616adf9ea..4598f08b275 100644 --- a/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-ec.scss +++ b/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-ec.scss @@ -28,7 +28,8 @@ $_search-width-xl: 31.5rem; bottom: 0; padding: 0; position: absolute; - width: 100%; + right: 0; + width: 50%; } .ecl-menu__open, @@ -36,7 +37,7 @@ $_search-width-xl: 31.5rem; margin-bottom: 3px; } - .ecl-link--cta { + .ecl-standardised-menu__cta { margin-top: map.get(theme.$spacing, 's'); width: max-content; } @@ -238,14 +239,15 @@ $_search-width-xl: 31.5rem; @include breakpoints.up('l') { .ecl-site-header-standardised { - .ecl-link--cta { + .ecl-standardised-menu__cta { align-self: start; - margin: map.get(theme.$spacing, 'l') 0; + margin: map.get(theme.$spacing, 'm') 0; } .ecl-menu { background-color: map.get(theme.$color, 'blue-100'); position: static; + width: 100%; } } diff --git a/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-eu.scss b/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-eu.scss index f8762fd2e19..f760ff9f9fb 100644 --- a/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-eu.scss +++ b/src/implementations/vanilla/components/site-header-standardised/site-header-standardised-eu.scss @@ -26,7 +26,8 @@ $_search-width-xl: 31.5rem; bottom: 0; padding: 0; position: absolute; - width: 100%; + right: 0; + width: 50%; } .ecl-menu__open, @@ -37,6 +38,11 @@ $_search-width-xl: 31.5rem; &:not([data-ecl-has-menu='true']) { box-shadow: 0 0 6px 0 rgba(9, 49, 142, 0.2); } + + .ecl-standardised-menu__cta { + margin-bottom: map.get(theme.$spacing, 'xs'); + width: max-content; + } } .ecl-site-header-standardised__container { @@ -236,6 +242,11 @@ $_search-width-xl: 31.5rem; @include breakpoints.up('l') { .ecl-site-header-standardised { + .ecl-standardised-menu__cta { + align-self: start; + margin: map.get(theme.$spacing, 'xs') 0; + } + .ecl-menu { background: linear-gradient( 90deg, @@ -243,6 +254,7 @@ $_search-width-xl: 31.5rem; map.get(theme.$color, 'blue-100') ); position: static; + width: 100%; } }