Skip to content

Commit

Permalink
Remove horizontal padding within primary nav (#157)
Browse files Browse the repository at this point in the history
This removes the horizontal padding within the items in the primary navigation.

Whilst the horizontal padding does increase the target area, it also leads to the border-bottom on the first item extending into the margin of the page, which arguably looks a bit odd.

The draft [One Login service header](https://github.com/alphagov/di-govuk-one-login-service-header) does not add horizontal padding, and neither does many of the service using this pattern (for example, [Apply for teacher training](https://becoming-a-teacher.design-history.education.gov.uk/apply-for-teacher-training/adding-a-navigation-bar/)) or the [version of the pattern in the MOJ design system](https://design-patterns.service.justice.gov.uk/components/primary-navigation/).

However the primary navigation bar on the [Design System website itself](https://design-system.service.gov.uk) does add horizontal padding.

An in-between option might be to have the padding for the increased target area, but to keep the border on the bottom of the active item to the width of the text.

However, given the height of the navigation bar, and the likely width of each item (which depends on the text), I think the target area size could already be considered sufficient?

## Screenshots

### Before

<img width="1122" alt="Screenshot 2023-10-31 at 13 02 52" src="https://github.com/x-govuk/govuk-prototype-components/assets/30665/61699dae-aa23-4574-b280-1c5f1b565802">

### After

<img width="1114" alt="Screenshot 2023-10-31 at 13 03 06" src="https://github.com/x-govuk/govuk-prototype-components/assets/30665/50de09e3-adc7-47fe-89c7-eebe4c12d53d">
  • Loading branch information
frankieroberto authored Nov 1, 2023
1 parent 738a742 commit c492001
Showing 1 changed file with 1 addition and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,10 @@

.x-govuk-primary-navigation__list {
@include govuk-clearfix;
left: govuk-spacing(-3);
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: govuk-spacing(-3);
width: calc(100% + #{govuk-spacing(6)});
}

Expand All @@ -27,6 +25,7 @@
height: 55px;
padding: 0 govuk-spacing(3);
position: relative;
margin-right: govuk-spacing(6)
}

.x-govuk-primary-navigation__item--current {
Expand Down

0 comments on commit c492001

Please sign in to comment.