From 023568fe3dba59b7f5c12ac610e02fd8bd6c772f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Feb 2013 01:28:35 -0800 Subject: [PATCH] Navbar realignment: * Change .brand to .navbar-brand * Change .btn-navbar to .navbar-toggle * Redesign navbar toggle to be a bit lighter and wider * Center align the navbar brand with a max-width of 200px (to minimize hit area) while still centering --- docs/_includes/navbar.html | 4 +-- docs/assets/css/bootstrap.css | 61 +++++++++++++++++++++++------------ docs/components.html | 30 ++++++++--------- less/navbar.less | 51 ++++++++++++++++++++--------- 4 files changed, 92 insertions(+), 54 deletions(-) diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index b9d5f02792..54cfc08bde 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -2,12 +2,12 @@ ================================================== -->
- - Bootstrap + Bootstrap
  • diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index cb8482a9f6..cdcd0f9368 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3120,6 +3120,7 @@ button.close { */ .navbar { + position: relative; padding: 10px 15px; background-color: #eeeeee; border-radius: 4px; @@ -3160,7 +3161,6 @@ button.close { } .navbar-static-top { - position: static; border-radius: 0; } @@ -3181,40 +3181,51 @@ button.close { bottom: 0; } -.navbar .brand { - display: inline-block; +.navbar-brand { + display: block; + max-width: 200px; padding: 7px 15px; + margin-right: auto; + margin-left: auto; font-size: 18px; font-weight: 500; line-height: 20px; color: #777777; + text-align: center; } -.navbar .brand:hover, -.navbar .brand:focus { +.navbar-brand:hover, +.navbar-brand:focus { color: #5e5e5e; text-decoration: none; background-color: transparent; } -.btn-navbar { - float: right; - padding: 10px 12px; - background-color: #ddd; - border: 0; +.navbar-toggle { + position: absolute; + top: 10px; + right: 10px; + padding: 8px 12px; + background-color: transparent; + border: 1px solid #ddd; border-radius: 4px; } -.btn-navbar .icon-bar { +.navbar-toggle:hover, +.navbar-toggle:focus { + background-color: #ddd; +} + +.navbar-toggle .icon-bar { display: block; - width: 20px; + width: 22px; height: 2px; background-color: #fff; border-radius: 1px; } -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; } .navbar .nav > .divider { @@ -3276,12 +3287,12 @@ button.close { background-color: #222222; } -.navbar-inverse .brand { +.navbar-inverse .navbar-brand { color: #999999; } -.navbar-inverse .brand:hover, -.navbar-inverse .brand:focus { +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus { color: #ffffff; background-color: transparent; } @@ -3307,8 +3318,13 @@ button.close { background-color: #080808; } -.navbar-inverse .btn-navbar { - background-color: #444; +.navbar-inverse .navbar-toggle { + border-color: #333; +} + +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background-color: #333; } .navbar-inverse .nav > .divider { @@ -3345,7 +3361,7 @@ button.close { padding-top: 0; padding-bottom: 0; } - .navbar .brand { + .navbar-brand { float: left; padding-top: 15px; padding-bottom: 15px; @@ -3379,7 +3395,10 @@ button.close { .navbar-inverse .nav > .divider { border-right-color: #2f2f2f; } - .navbar .btn-navbar { + .navbar-toggle { + position: relative; + top: auto; + left: auto; display: none; } .nav-collapse.collapse { diff --git a/docs/components.html b/docs/components.html index f1b45159b7..63c37131ec 100644 --- a/docs/components.html +++ b/docs/components.html @@ -766,7 +766,7 @@ title: Components

    To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

    - Title + Title
    • Home
    • Link
      • @@ -776,7 +776,7 @@ title: Components
    {% highlight html linenos %}
    - Title + Title
    • Home
    • Link
      • @@ -791,11 +791,11 @@ title: Components

      A simple link to show your brand or project name only requires an anchor tag.

      - Title + Title
      {% highlight html linenos %} -Title +Title {% endhighlight %}

      Nav links

      @@ -874,7 +874,7 @@ title: Components
      - Title + Title
      • Home
      • Link
        • @@ -894,7 +894,7 @@ title: Components
        - Title + Title
        • Home
        • Link
          • @@ -914,7 +914,7 @@ title: Components
          - Title + Title
          • Home
          • Link
            • @@ -931,16 +931,16 @@ title: Components

            Responsive navbar

            -

            To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

            +

            To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .navbar-toggle.

            - + - Title + Title
            • Home
              • @@ -984,15 +984,15 @@ title: Components
              - - + + - Title + Title
              @@ -1012,12 +1012,12 @@ title: Components
              - + - Title + Title
              • Home
                • diff --git a/less/navbar.less b/less/navbar.less index 8aefd85407..7c70f83a6c 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -4,6 +4,7 @@ // Wrapper and base class .navbar { + position: relative; padding: 10px 15px; background-color: @navbar-bg; border-radius: @border-radius-base; @@ -16,7 +17,8 @@ .navbar { .nav { - margin-top: 15px; // space out from .navbar .brand and .btn-navbar + // space out from .navbar .brand and .btn-navbar + margin-top: 15px; } .nav > li > a { padding-top: (@navbar-height - @line-height-base) / 2; @@ -45,7 +47,6 @@ // Static navbar .navbar-static-top { - position: static; border-radius: 0; } @@ -68,13 +69,17 @@ // -------------------------------------------------- // Brand/project name -.navbar .brand { - display: inline-block; +.navbar-brand { + display: block; + max-width: 200px; + margin-left: auto; + margin-right: auto; padding: 7px 15px; font-size: 18px; font-weight: 500; line-height: @line-height-base; color: @navbar-brand-color; + text-align: center; &:hover, &:focus { color: @navbar-brand-color-hover; @@ -84,23 +89,30 @@ } // Collapsible navbar toggle -.btn-navbar { - float: right; - padding: 10px 12px; - background-color: #ddd; - border: 0; +.navbar-toggle { + position: absolute; + top: 10px; + right: 10px; + padding: 8px 12px; + background-color: transparent; + border: 1px solid #ddd; border-radius: 4px; + &:hover, + &:focus { + background-color: #ddd; + } + // Bars .icon-bar { display: block; - width: 20px; + width: 22px; height: 2px; background-color: #fff; border-radius: 1px; } .icon-bar + .icon-bar { - margin-top: 3px; + margin-top: 4px; } } @@ -171,7 +183,7 @@ .navbar-inverse { background-color: @navbar-inverse-bg; - .brand { + .navbar-brand { color: @navbar-inverse-brand-color; &:hover, &:focus { @@ -200,8 +212,12 @@ } // Darken the responsive nav toggle - .btn-navbar { - background-color: #444; + .navbar-toggle { + border-color: #333; + &:hover, + &:focus { + background-color: #333; + } } // Darken dividers @@ -243,7 +259,7 @@ padding-top: 0; padding-bottom: 0; } - .navbar .brand { + .navbar-brand { float: left; padding-top: (@navbar-height - @line-height-base) / 2; padding-bottom: (@navbar-height - @line-height-base) / 2; @@ -277,7 +293,10 @@ } // Required to make the collapsing navbar work on regular desktops - .navbar .btn-navbar { + .navbar-toggle { + position: relative; + top: auto; + left: auto; display: none; } .nav-collapse.collapse {