diff --git a/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml b/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml
index a63f812c342e0fa90e3336e613ca8db3cf8616a0..75608dd8b30bba9dce57e01f32a0533aa3c993a0 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml
@@ -9,8 +9,8 @@ dependencies:
- umami
id: umami_account_menu
theme: umami
-region: header
-weight: -4
+region: pre_header
+weight: -6
provider: null
plugin: 'system_menu_block:account'
settings:
diff --git a/core/profiles/demo_umami/config/install/block.block.umami_branding.yml b/core/profiles/demo_umami/config/install/block.block.umami_branding.yml
index a6af6e484b44712615d04c84c02d80ab76e8d5fb..bbff87e6272035ec3c5735192481c718ac500586 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_branding.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_branding.yml
@@ -8,7 +8,7 @@ dependencies:
id: umami_branding
theme: umami
region: header
-weight: -8
+weight: -7
provider: null
plugin: system_branding_block
settings:
diff --git a/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml b/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml
index 4788dddaa901fa726d11ce7d22eb6a58713dfb7c..1feaeeea7289a67e02b360334ef3147be03e8d21 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml
@@ -10,7 +10,7 @@ dependencies:
id: umami_main_menu
theme: umami
region: header
-weight: -8
+weight: -6
provider: null
plugin: 'system_menu_block:main'
settings:
diff --git a/core/profiles/demo_umami/config/install/block.block.umami_search.yml b/core/profiles/demo_umami/config/install/block.block.umami_search.yml
index f86e71c718952ffc60b87e9dbcf709c817926721..bf1f99b2a53addde0b65df6b7eba52099b0f9e2f 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_search.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_search.yml
@@ -7,8 +7,8 @@ dependencies:
- umami
id: umami_search
theme: umami
-region: header
-weight: -6
+region: pre_header
+weight: -7
provider: null
plugin: search_form_block
settings:
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css
index 73377524330f651a4b430b428a295fe2396a0a4d..d43a031a1e0b4965554f110d25936b2fa22d7987 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css
@@ -5,14 +5,11 @@
.block-system-branding-block {
flex: 0 1 40%;
- order: 2;
- text-align: center;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 220px;
- order: 3;
margin: 2.5rem 0;
text-align: left;
}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
index 5c268be34c8f7dbdd6a081f0e7b34d92f1fef036..fe3684298847e56c9b3bbd95714beb6dd1f2a3fe 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
@@ -13,10 +13,8 @@
@media screen and (min-width: 48em) {
.search-block-form {
- flex: 0 1 50%;
- order: 1;
display: block;
- border-bottom: 1px solid #e6eee0;
+ flex: 0 1 50%;
}
}
@@ -27,11 +25,8 @@
}
.search-iconwrap {
- flex: 0 1 30%;
- order: 3;
- display: flex;
- justify-content: flex-end;
- padding-right: 1rem;
+ /* Compensate for focus styling that offsets left alignment of icon */
+ margin-left: -7px;
}
@media screen and (min-width: 48em) {
@@ -42,19 +37,19 @@
/* Search icon for mobile */
.search-link {
- width: 40px;
- height: 40px;
display: flex;
- align-items: center;
justify-content: flex-end;
+ align-items: center;
+ width: 40px;
+ height: 40px;
/* Centres the icon when focused/hovered */
- padding-right: 7px;
margin-right: -7px;
+ padding-right: 7px;
}
.search-link:focus,
.search-link:hover {
- background-color: #fff;
outline: 3px solid #00836d;
+ background-color: #fff;
}
.search-link svg {
display: block;
@@ -74,19 +69,19 @@
height: auto;
margin: 0 -2px 0 0;
padding: 7px 8px 7px 32px;
+ color: #464646;
border: 1px solid #dbdbdb;
border-right: none;
border-radius: 3px;
+ background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
font-size: 0.875rem;
line-height: normal;
- background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
- color: #464646;
}
.form-search:focus {
- outline: none;
margin: 0 0 -2px -2px;
padding: 5px 8px 5px 32px;
+ outline: none;
}
.form-search::placeholder {
@@ -98,10 +93,10 @@
/* Search submit */
.search-block-form .form-actions {
- margin-top: 0;
- margin-bottom: 0;
position: relative;
z-index: 1;
+ margin-top: 0;
+ margin-bottom: 0;
}
.search-block-form .form-submit,
.search-form .form-submit {
@@ -114,7 +109,7 @@
.search-block-form .form-submit:hover,
.search-form .form-submit:focus,
.search-form .form-submit:hover {
+ margin: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
- margin: 0;
}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
index 07e0dde9c3a54bda2b0bbe1f7503ffc6af48fa2a..ac4f3918525827373bf1e4a6d81bfa58eef1e9f9 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
@@ -3,34 +3,28 @@
* This file is used to style the account menu.
*/
-.menu--account {
- display: none;
-}
-
@media screen and (min-width: 48em) {
.menu--account {
- flex: 0 1 50%;
- order: 2;
display: block;
- border-bottom: 1px solid #e6eee0;
+ flex: 0 1 50%;
text-align: right;
}
}
.menu-account {
display: inline-flex;
- margin: 1.6em 0;
+ margin: 0;
padding: 0;
- line-height: 1.5;
list-style-type: none;
+ line-height: 1.5;
}
.menu-account__item + .menu-account__item {
margin-left: 1em;
}
.menu-account__link,
.menu-account__link:hover {
- color: inherit;
text-decoration: none;
+ color: inherit;
background-color: inherit;
}
.menu-account__link:hover {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
index 72eb2db80f8b08964208a311525e20f080a1ff55..44b715b182438ce61476db248b2bf073423c6299 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -31,7 +31,7 @@
line-height: 1;
/* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */
padding: 0 6px;
- margin-left: -9px;
+ margin-right: -9px;
border: 3px solid transparent;
border-radius: 0;
text-align: left;
@@ -90,12 +90,6 @@
}
}
-.menu-main-togglewrap {
- flex: 0 1 30%;
- order: 1;
- padding-left: 1rem;
-}
-
@media screen and (min-width: 48em) {
.menu-main-togglewrap {
display: none;
@@ -103,14 +97,12 @@
}
.menu-main__wrapper {
- order: 4;
flex: 0 1 100%;
text-align: center;
}
@media screen and (min-width: 48em) {
.menu-main__wrapper {
- order: 4;
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(100% - 220px);
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css b/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
index 35f75c45c35bec8c2bd758f5227886f5d9694aad..cc7b7b40d64a1a19f5f5adfa1c37daa7aca72f9f 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
@@ -15,7 +15,8 @@
display: flex;
flex-wrap: wrap;
align-items: center;
- padding: 0.75rem 0;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
}
@media screen and (min-width: 48em) {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
new file mode 100644
index 0000000000000000000000000000000000000000..0e3ca3a90e542b95c539fd4aa1a12c54ba0bbb49
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
@@ -0,0 +1,29 @@
+/**
+ * @file
+ * This file is used to style the pre-header.
+ *
+ * It styles the pre-header as a global component; it does not style individual
+ * pre-header items, such as search, which are styled by their own CSS files.
+ */
+
+.region-pre-header {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid #e6eee0;
+}
+
+@media screen and (min-width: 48em) {
+ .region-pre-header {
+ padding: 0 1rem;
+ }
+}
+
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .region-pre-header {
+ padding: 0;
+ }
+}
diff --git a/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig b/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
index 0cce8e4f96fef5542ddce5a3c97bace5d3f2f36b..0d7ed3bef317d23a04823d1973ec4a2a7b5b1f5c 100644
--- a/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
@@ -44,10 +44,16 @@
#}
<div class="layout-container">
- {% if page.header|render|striptags|trim is not empty %}
+ {% if page.pre_header|render|striptags|trim is not empty or
+ page.header|render|striptags|trim is not empty %}
<header class="layout-header" role="banner">
<div class="container">
- {{ page.header }}
+ {% if page.pre_header|render|striptags|trim is not empty %}
+ {{ page.pre_header }}
+ {% endif %}
+ {% if page.header|render|striptags|trim is not empty %}
+ {{ page.header }}
+ {% endif %}
</div>
</header>
{% endif %}
diff --git a/core/profiles/demo_umami/themes/umami/umami.info.yml b/core/profiles/demo_umami/themes/umami/umami.info.yml
index cd324a8faccd399aee2d37d995222f15e2008a30..c38daa7bb68f5acc9941281e4e6bf0557b48c3cb 100644
--- a/core/profiles/demo_umami/themes/umami/umami.info.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.info.yml
@@ -13,6 +13,7 @@ libraries-override:
classy/messages: false
regions:
+ pre_header: Pre-header
header: Header
highlighted: Highlighted
tabs: Tabs
diff --git a/core/profiles/demo_umami/themes/umami/umami.libraries.yml b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
index 83f4e9b597198464e724dd7c1a02f4a68250c3e3..467b2bf9a183072fc0ecb51ec0a35f62a6d0f542 100644
--- a/core/profiles/demo_umami/themes/umami/umami.libraries.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
@@ -33,6 +33,7 @@ global:
css/components/regions/bottom/bottom.css: {}
css/components/regions/footer/footer.css: {}
css/components/regions/header/header.css: {}
+ css/components/regions/pre-header/pre-header.css: {}
layout:
css/layout/grid-2.css: {}
css/layout/grid-3.css: {}