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
  • !22230

Navbar fixes

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge navbar-fixes into v4-dev Mar 21, 2017
  • Overview 0
  • Commits 18
  • Pipelines 0
  • Changes 18

This PR builds on @vanduynslagerp's work in #21719 as a basis for many of our navbar related issues. 😅 Basically there's a bug in a Sass mixin, some unnecessary position: absolute, a missing .container-fluid, and some inconsistent sizing of navbar sub-components. That's all getting fixed here.

  • Correct navbar collapsing breakpoints resulting from the broken Sass mixin that was generating our .navbar-toggleable classes. Basically this wasn't generating mobile-first classes, so we were acting on the wrong media query values. Fixes #21691 (closed), fixes #21706 (closed), and closes #21719.

    As part of this, .navbar-toggleable classes have been renamed to .navbar-expand to match the mobile-first approach used elsewhere.

  • Redo the .navbar-toggler alignment by dropping the modifiers entirely. Instead of using absolute position, we run with the DOM order and make use of justify-content: space-between, forcing navbar brand and toggler to be on opposite ends of the navbar. This drops .navbar-toggler-left and .navbar-toggler-right Fixes #21659 (closed), fixes #21735 (closed), fixes #21846 (closed), fixes #21984 (closed), and closes #21729.

  • Resolve issues with .container-fluid not being fully supported within .navbar. Fixes #21530 (closed) and closes #21901.

  • Normalizes the sizing of navbar brand, text, and link elements by pulling in the changes from #21721 (which fixes #21705 (closed), fixes #21956 (closed), and fixes #21604 (closed)). This one might still need further love, or our inputs will; the text input and buttons are 38px vs the nav's 40px. Any changes to that will come in another PR.

Still to do:

  • Update navbar doc examples to drop toggler modifiers and reorder brand/toggler
  • Drop navbar toggler variants in docs
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: navbar-fixes