Skip to content

Styling adjustment on header for certain pages (Fixes #15873) #16027

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

Closed
wants to merge 1 commit into from
Closed

Styling adjustment on header for certain pages (Fixes #15873) #16027

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 9 additions & 1 deletion media/css/m24/components/navigation-refresh.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,10 +158,18 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
width: 100px;
}



// Mobile navigation menu with JS enabled.
.js .m24-c-navigation-items {
display: none;


a {
&:hover {
color: $color-black !important;
}
}
Comment on lines +167 to +171
Copy link
Collaborator

@janbrasna janbrasna Mar 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just quickly looking at the impact: (not diving into formatting and linting as this would fail the checks, starting with important not being allowed generally etc.…)

  1. It's not always black, current item uses dark green so there are perhaps more combinations to check for.
  2. I might have missed the idea why this is only applied in the js enhanced block, and not universally?
  3. There are existing specificity overrides, so this might be worth exploring if such nesting helps with the order:

bedrock/media/css/m24/components/navigation-refresh.scss

Lines 368 to 373 in b57052f

// extra specificity to override link colors on some Firefox pages
&:link,
&:visited {
color: $color-black;
text-decoration: none;
}


@media (max-width: $screen-md) {
&.mzp-is-open {
display: flex;
Expand Down