Skip to content

7079 - Main Nav Layout Shift - #7169

Open
rfultz wants to merge 1 commit into
developfrom
feature/7079-menu-shift
Open

7079 - Main Nav Layout Shift#7169
rfultz wants to merge 1 commit into
developfrom
feature/7079-menu-shift

Conversation

@rfultz

@rfultz rfultz commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Summary

Tweaking the css to fix some layout shifts on rollover in some browsers

Required reviewers

  • UX?
  • dev

Impacted areas of the application

  • Main-nav on every page of every site and every repo

Screenshots

www, Firefox:
image

www, Firefox, hover over "Committees"
image

This PR, Firefox:
image

This PR, Chrome:
image

This PR, Safari:
image

Related PRs

None

How to test

  • Pull the branch
  • npm i
  • npm run build
  • ./manage.py runserver
  • Load any page and check the main nav elements
    • Main nav link columns are balanced for medium+
    • Main nav link columns don't shift on rollover for medium+
    • Main nav is unaffected for smallest widths
    • across browsers (at least Chrome, Firefox, Safari)

@rfultz rfultz added this to the 32.4 milestone Jul 14, 2026
@rfultz rfultz self-assigned this Jul 14, 2026
@rfultz rfultz moved this to 👀 Ready in Website project Jul 14, 2026
@JonellaCulmer

Copy link
Copy Markdown
Contributor

@rfultz Just want to confirm that the main nav is unaffected at the wider widths like you note with the smaller widths?

@patphongs patphongs modified the milestones: 32.4, 32.5 Jul 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: 👀 Ready

Development

Successfully merging this pull request may close these issues.

Extra line appearing in H4CC menu Concern about placement of menu options within main tabs Content Layout Shift on About dropdown menu

3 participants