Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Line up navigation items with header #999

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Line up navigation items with header #999

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55fdbee
line up navigation items with header
frankieroberto Aug 20, 2024
caee8b9
Restore position relative
frankieroberto Aug 20, 2024
aeb85c0
Merge branch 'main' into header-navigation-margins
frankieroberto Aug 22, 2024
d077679
Merge branch 'main' into header-navigation-margins
frankieroberto Sep 27, 2024
529a772
Fix mobile layout
frankieroberto Sep 27, 2024
8b2b730
Fix prettier linting
frankieroberto Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions packages/components/header/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,8 +449,18 @@
}

.nhsuk-navigation {
/* These negative margins are the same as the padding on the navigation items,
and used to align the text of the first and last item with the rest of the header. */
margin-left: -12px;
margin-right: -12px;
display: flex;

@include mq($from: tablet) {
/* These padding is slightly more from tablet width upwards. */
margin-left: -16px;
margin-right: -16px;
}

@include mq($until: tablet) {
position: relative;
z-index: 10;
Expand All @@ -466,8 +476,6 @@
// ul of visible nav
.nhsuk-header__navigation-list {
@extend %nhsuk-navigation-list;
@include govuk-width-container;

width: 100%;

@include mq($from: desktop) {
Expand All @@ -485,6 +493,7 @@
}

.nhsuk-navigation-container {
@include govuk-width-container;
@include print-hide();
position: relative;
}
Expand Down
Loading