Skip to content

GitHub Global Nav Full Width Search by blakegearin

Screenshot of GitHub Global Nav Full Width Search

Details

Authorblakegearin

LicenseMIT

Categorygithub.com

Created

Updated

Size850 B

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Updates GitHub's new global navigation to have a maximum width search bar for ease of use

Notes

The search bar becomes a button on smaller screens. Using the same breakpoint as GitHub, these changes are ignored in this context.

Source code

/* ==UserStyle==
@name         GitHub Global Nav Full Width Search
@namespace    https://blakegearin.com
@version      1.0.0
@description  Updates GitHub's new global navigation to have a maximum width search bar for ease of use
@author       Blake Gearin
@license      MIT
==/UserStyle== */

@-moz-document domain("github.com") {
  @media (min-width: 1012px) {
    header .search-input
    {
      width: auto !important
    }

    header .AppHeader-globalBar-start
    {
      flex: 0 1 auto !important;
    }

    header .AppHeader-globalBar-end
    {
      flex: 1 1 auto !important;
      justify-content: space-between !important;
    }

    header .AppHeader-search
    {
      display: block !important;
    }

    header .AppHeader-search-whenRegular
    {
      max-width: none !important;
    }
  }
}

Reviews

No reviews yet.