Skip to content

Reorganise main navigation menu - #931

Draft
gellowg wants to merge 7 commits into
mainfrom
reorganise-main-menu
Draft

Reorganise main navigation menu#931
gellowg wants to merge 7 commits into
mainfrom
reorganise-main-menu

Conversation

@gellowg

@gellowg gellowg commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Overview

This PR reorganises the website’s main navigation so it looks less cluttered and makes pages easier to find. It also improves the behaviour and accessibility of the desktop and mobile dropdown menus.

Changes

Navigation structure

  • Groups events-related pages under a new What’s On dropdown:
    • Events
    • Calendar
    • News
  • Groups information about CSS under a new Society dropdown:
    • About
    • Committee
    • Merch
    • Sponsor Us
    • Community Links
  • Retains the Ball dropdown containing pages for each year
  • Adds a separate Join CSS link leading to the membership page
  • Styles Join CSS as a prominent call to action so it stands out from the other navigation items

Desktop menu

  • Replaces non-navigating dropdown links with semantic buttons
  • Adds arrow indicators to show which items contain dropdown menus
  • Adds the relevant ARIA attributes to associate each dropdown button with its menu

Mobile menu

  • Converts expandable menu headings into buttons instead of links
  • Makes the dropdowns behave so opening one dropdown closes any other open dropdown (saves space)
  • Updates aria-expanded whenever a dropdown is opened or closed
  • Automatically closes the mobile menu overlay when website resized to desktop size
  • Hamburger menu uses pointer cursor on hover
  • Removes the redundant parent links previously repeated inside mobile dropdowns

@gellowg
Changed structure of menu in config,
2101138 
Changed a tags to button tags as dropdown titles no longer navigate to pages,
got rid of additional item for mobile dropdowns for same reason
openning a new dropdown closes others on mobile
@gellowg
Added accessibility features:
dd7d2c6 
Dropdown buttons identify the menu they control,
Added aria
JavaScript updates aria-expanded whenever a mobile dropdown changes
@gellowg
Added dropdown chevrons
be84b54
@gellowg
Changed sponsors to Sponsor Us
2b9cb70
@gellowg
Made hamburger menu have a pointer cursor on hover
8f90d09 
Fixed hamburger menu from filling the whole navbar
Mobile menu closes if viewport crosses above 1050px (when desktop)
@gellowg
Added a marker effect under Join CSS to make it CTA.
3221a1e 
Made JS prettier
@gellowg
changed chevron design and position
c90dab9
@gellowg
gellowg requested a review from a team as a code owner September 4, 2026 11:37
@github-actions github-actions Bot added the sync Keep this pr up to date with it's base branch automatically label Sep 4, 2026
@github-actions

github-actions Bot commented Sep 4, 2026

Copy link
Copy Markdown

This pull request has been marked to automatically sync to its base branch. You can disable this behavior by removing the label.

@cssbhamdev
cssbhamdev enabled auto-merge (squash) September 4, 2026 11:37
@gellowg
gellowg marked this pull request as draft September 4, 2026 11:39
auto-merge was automatically disabled September 4, 2026 11:39

Pull request was converted to draft

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

sync Keep this pr up to date with it's base branch automatically

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@gellowg