Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !32526

Animate `navbar-toggler-icon` using pseudo-elements

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/goulvench/animate-navbar-toggler-icon into main Dec 18, 2020
  • Overview 1
  • Commits 2
  • Pipelines 0
  • Changes 2

Created by: goulvench

The proposed change replaces the current static SVG background in navbar toggler buttons with pseudo-elements, which animate to an x-shape when the menu is expanded. This change adds visual feedback when opening menus, like the accordion component, and like most menu icons.

I know that animating the menu icon has been discussed and rejected in #25788 (closed) but since I add this to every website I build, I thought the discussion could be reopened as others might find it useful too.

Code linted and tested, works with light, dark and colored backgrounds thanks to currentColor, and is easy to override by using a different class on the <span>.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/goulvench/animate-navbar-toggler-icon