From 848ee72e3f466dacce23e25e16a09a2eb365b687 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 17 Mar 2022 11:58:25 +0000 Subject: [PATCH] Strip underline from focused + hovered nav links Our CSS for links in the navigation, which makes the underline appear on hover is overriding the GOVUK focus styles, making it look like there are 2 underlines. This adds some extra CSS to reset it. The new CSS is further down the stylesheet to the hover styles. This gives them a higher specificity meaning they override them when these links are hovered over while in focus. --- app/assets/stylesheets/components/navigation.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index 80ba06fb9..17eb6271b 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -68,6 +68,10 @@ text-decoration: underline; } + &:focus { + text-decoration: none; // override the :hover style (the focus style has its own underline) + } + } &-service { @@ -167,6 +171,10 @@ text-decoration: underline; } + &:focus { // override the :hover style (the focus style has its own underline) + text-decoration: none; + } + &.selected { @include bold-19; position: relative;