From 94962c0553c80c791c26a7279163a475bc1b5f78 Mon Sep 17 00:00:00 2001 From: Sky Johnson Date: Fri, 11 Apr 2025 16:38:52 -0500 Subject: [PATCH] navbar --- css/navbar.css | 606 +++++++++++--------------------------- css/responsive-navbar.css | 202 ------------- css/responsive.css | 18 -- css/tests/navbar.html | 124 ++++---- 4 files changed, 227 insertions(+), 723 deletions(-) delete mode 100644 css/responsive-navbar.css delete mode 100644 css/responsive.css diff --git a/css/navbar.css b/css/navbar.css index 0312566..df4615a 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -1,23 +1,16 @@ /* - Navbars - ======================================== -*/ + * Simplified Modern Navbar + * Flattened structure using flexbox + */ -/* COMMON STYLES - -------------------------------------------------- */ - -/* Base class and wrapper */ +/* Base navbar */ .navbar { - overflow: visible; - margin-bottom: var(--base-line-height); -} - -/* Inner for background effects */ -/* Gradient is applied to its own element because overflow visible is not honored by IE when filter is present */ -.navbar-inner { + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 0 20px; min-height: var(--navbar-height); - padding-left: 20px; - padding-right: 20px; + margin-bottom: var(--base-line-height); background-color: var(--navbar-background); background-image: linear-gradient(to bottom, var(--navbar-background-highlight), var(--navbar-background)); border: 1px solid var(--navbar-border); @@ -25,305 +18,117 @@ box-shadow: 0 1px 4px rgba(0,0,0,.065); } -.navbar-inner:before, -.navbar-inner:after { - display: table; - content: ""; - line-height: 0; -} - -.navbar-inner:after { - clear: both; -} - -/* Set width to auto for default container */ -.navbar .container { - width: auto; -} - -/* Override the default collapsed state */ -.nav-collapse.collapse { - height: auto; - overflow: visible; -} - -/* Brand: website or project name - ----------------------------- */ -.navbar .brand { - float: left; - display: block; - /* Vertically center the text given var(--navbar-height) */ - padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 20px calc((var(--navbar-height) - var(--base-line-height)) / 2); - margin-left: -20px; /* negative indent to left-align the text down the page */ +/* Brand */ +.navbar-brand { + display: flex; + align-items: center; + height: var(--navbar-height); + padding: 0 20px; + margin-left: -20px; + margin-right: 20px; font-size: 20px; font-weight: 200; color: var(--navbar-brand-color); text-shadow: 0 1px 0 var(--navbar-background-highlight); -} - -.navbar .brand:hover, -.navbar .brand:focus { text-decoration: none; } -/* Plain text in topbar - -------------------------- */ -.navbar-text { - margin-bottom: 0; - line-height: var(--navbar-height); - color: var(--navbar-text); +.navbar-brand:hover, +.navbar-brand:focus { + text-decoration: none; } -/* Janky solution for now to account for links outside the .nav - -------------------------- */ -.navbar-link { - color: var(--navbar-link-color); +/* Toggle button for responsive */ +.navbar-toggle { + display: none; + padding: 7px 10px; + margin-left: auto; + margin-right: 5px; + color: #fff; + background-color: #ededed; + background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); + border: 1px solid #ccc; + border-radius: var(--base-border-radius); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); } -.navbar-link:hover, -.navbar-link:focus { - color: var(--navbar-link-color-hover); +.navbar-toggle .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #888; + border-radius: 1px; + box-shadow: 0 1px 0 rgba(0,0,0,.25); } -/* Dividers in navbar - -------------------------- */ -.navbar .divider-vertical { - height: var(--navbar-height); - margin: 0 9px; - border-left: 1px solid var(--navbar-background); - border-right: 1px solid var(--navbar-background-highlight); -} - -/* Buttons in navbar - -------------------------- */ -.navbar .btn, -.navbar .btn-group { - margin-top: calc((var(--navbar-height) - 30px) / 2); -} - -.navbar .btn-group .btn, -.navbar .input-prepend .btn, -.navbar .input-append .btn, -.navbar .input-prepend .btn-group, -.navbar .input-append .btn-group { - margin-top: 0; /* then undo the margin here so we don't accidentally double it */ -} - -/* Navbar forms - -------------------------- */ -.navbar-form { - margin-bottom: 0; /* remove default bottom margin */ -} - -.navbar-form:before, -.navbar-form:after { - display: table; - content: ""; - line-height: 0; -} - -.navbar-form:after { - clear: both; -} - -.navbar-form input, -.navbar-form select, -.navbar-form .radio, -.navbar-form .checkbox { - margin-top: calc((var(--navbar-height) - 30px) / 2); -} - -.navbar-form input, -.navbar-form select, -.navbar-form .btn { - display: inline-block; - margin-bottom: 0; -} - -.navbar-form input[type="image"], -.navbar-form input[type="checkbox"], -.navbar-form input[type="radio"] { +.navbar-toggle .icon-bar + .icon-bar { margin-top: 3px; } -.navbar-form .input-append, -.navbar-form .input-prepend { - margin-top: 5px; - white-space: nowrap; /* prevent two items from separating within a .navbar-form that has .pull-left */ +/* Collapsible navigation */ +.navbar-collapse { + display: flex; + flex-grow: 1; } -.navbar-form .input-append input, -.navbar-form .input-prepend input { - margin-top: 0; /* remove the margin on top since it's on the parent */ -} - -/* Navbar search - -------------------------- */ -.navbar-search { - position: relative; - float: left; - margin-top: calc((var(--navbar-height) - 30px) / 2); - margin-bottom: 0; -} - -.navbar-search .search-query { - margin-bottom: 0; - padding: 4px 14px; - font-family: var(--sans-font-family); - font-size: 13px; - font-weight: normal; - line-height: 1; - border-radius: 15px; /* redeclare because of specificity of the type attribute */ -} - -/* Static navbar - -------------------------- */ -.navbar-static-top { - position: static; - margin-bottom: 0; /* remove 18px margin for default navbar */ -} - -.navbar-static-top .navbar-inner { - border-radius: 0; -} - -/* Fixed navbar - -------------------------- */ -/* Shared (top/bottom) styles */ -.navbar-fixed-top, -.navbar-fixed-bottom { - position: fixed; - right: 0; - left: 0; - z-index: var(--zindex-fixed-navbar); - margin-bottom: 0; /* remove 18px margin for default navbar */ -} - -.navbar-fixed-top .navbar-inner, -.navbar-static-top .navbar-inner { - border-width: 0 0 1px; -} - -.navbar-fixed-bottom .navbar-inner { - border-width: 1px 0 0; -} - -.navbar-fixed-top .navbar-inner, -.navbar-fixed-bottom .navbar-inner { +/* Nav lists */ +.navbar-nav { + display: flex; padding-left: 0; - padding-right: 0; - border-radius: 0; -} - -/* Reset container width */ -.navbar-static-top .container, -.navbar-fixed-top .container, -.navbar-fixed-bottom .container { - width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1))); -} - -/* Fixed to top */ -.navbar-fixed-top { - top: 0; -} - -.navbar-fixed-top .navbar-inner, -.navbar-static-top .navbar-inner { - box-shadow: 0 1px 10px rgba(0,0,0,.1); -} - -/* Fixed to bottom */ -.navbar-fixed-bottom { - bottom: 0; -} - -.navbar-fixed-bottom .navbar-inner { - box-shadow: 0 -1px 10px rgba(0,0,0,.1); -} - -/* NAVIGATION - ---------- */ -.navbar .nav { - position: relative; - left: 0; - display: block; - float: left; margin: 0 10px 0 0; + list-style: none; } -.navbar .nav.pull-right { - float: right; /* redeclare due to specificity */ - margin-right: 0; /* remove margin on float right nav */ -} - -.navbar .nav > li { - float: left; -} - -/* Links */ -.navbar .nav > li > a { - float: none; - /* Vertically center the text given var(--navbar-height) */ - padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 15px calc((var(--navbar-height) - var(--base-line-height)) / 2); +.navbar-nav > li > a { + display: flex; + align-items: center; + height: var(--navbar-height); + padding: 0 15px; color: var(--navbar-link-color); text-decoration: none; text-shadow: 0 1px 0 var(--navbar-background-highlight); } -.navbar .nav .dropdown-toggle .caret { - margin-top: 8px; -} - -/* Hover/focus */ -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: var(--navbar-link-background-hover); /* "transparent" is default to differentiate :hover/:focus from .active */ +.navbar-nav > li > a:focus, +.navbar-nav > li > a:hover { + background-color: var(--navbar-link-background-hover); color: var(--navbar-link-color-hover); text-decoration: none; } -/* Active nav items */ -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { +/* Active items */ +.navbar-nav > .active > a, +.navbar-nav > .active > a:hover, +.navbar-nav > .active > a:focus { color: var(--navbar-link-color-active); text-decoration: none; background-color: var(--navbar-link-background-active); box-shadow: inset 0 3px 8px rgba(0,0,0,.125); } -/* Navbar button for toggling navbar items in responsive layouts */ -.navbar .btn-navbar { +/* Right aligned nav */ +.navbar-right { + margin-left: auto; + margin-right: 0; +} + +/* Dropdown menus */ +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: var(--zindex-dropdown); display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: #ededed; - background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); - border-color: #e5e5e5 #e5e5e5 #bfbfbf; - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + background-color: var(--dropdown-background); + border: 1px solid var(--dropdown-border); + border-radius: var(--base-border-radius); + box-shadow: 0 5px 10px rgba(0,0,0,.2); } -.navbar .btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - border-radius: 1px; - box-shadow: 0 1px 0 rgba(0,0,0,.25); -} - -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} - -/* Dropdown menus - -------------- */ -/* Menu position and menu carets */ -.navbar .nav > li > .dropdown-menu:before { +.dropdown-menu:before { content: ''; display: inline-block; border-left: 7px solid transparent; @@ -335,7 +140,7 @@ left: 9px; } -.navbar .nav > li > .dropdown-menu:after { +.dropdown-menu:after { content: ''; display: inline-block; border-left: 6px solid transparent; @@ -346,192 +151,113 @@ left: 10px; } -/* Menu position and menu caret support for dropups via extra dropup class */ -.navbar-fixed-bottom .nav > li > .dropdown-menu:before { - border-top: 7px solid #ccc; - border-top-color: var(--dropdown-border); - border-bottom: 0; - bottom: -7px; - top: auto; +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + color: var(--dropdown-link-color); + text-decoration: none; + white-space: nowrap; } -.navbar-fixed-bottom .nav > li > .dropdown-menu:after { - border-top: 6px solid var(--dropdown-background); - border-bottom: 0; - bottom: -6px; - top: auto; +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + color: var(--dropdown-link-color-hover); + background-color: var(--dropdown-link-background-hover); } -/* Caret should match text color on hover/focus */ -.navbar .nav li.dropdown > a:hover .caret, -.navbar .nav li.dropdown > a:focus .caret { - border-top-color: var(--navbar-link-color-hover); - border-bottom-color: var(--navbar-link-color-hover); +.dropdown.open > .dropdown-menu { + display: block; } -/* Remove background color from open dropdown */ -.navbar .nav li.dropdown.open > .dropdown-toggle, -.navbar .nav li.dropdown.active > .dropdown-toggle, -.navbar .nav li.dropdown.open.active > .dropdown-toggle { - background-color: var(--navbar-link-background-active); - color: var(--navbar-link-color-active); +/* Dividers */ +.divider-vertical { + height: var(--navbar-height); + margin: 0 9px; + border-left: 1px solid var(--navbar-background); + border-right: 1px solid var(--navbar-background-highlight); } -.navbar .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: var(--navbar-link-color); - border-bottom-color: var(--navbar-link-color); +.dropdown-menu .divider { + height: 1px; + margin: 9px 1px; + overflow: hidden; + background-color: var(--dropdown-divider-top); + border-bottom: 1px solid var(--dropdown-divider-bottom); } -.navbar .nav li.dropdown.open > .dropdown-toggle .caret, -.navbar .nav li.dropdown.active > .dropdown-toggle .caret, -.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: var(--navbar-link-color-active); - border-bottom-color: var(--navbar-link-color-active); -} - -/* Right aligned menus need alt position */ -.navbar .pull-right > li > .dropdown-menu, -.navbar .nav > li > .dropdown-menu.pull-right { - left: auto; - right: 0; -} - -.navbar .pull-right > li > .dropdown-menu:before, -.navbar .nav > li > .dropdown-menu.pull-right:before { - left: auto; - right: 12px; -} - -.navbar .pull-right > li > .dropdown-menu:after, -.navbar .nav > li > .dropdown-menu.pull-right:after { - left: auto; - right: 13px; -} - -.navbar .pull-right > li > .dropdown-menu .dropdown-menu, -.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu { - left: auto; - right: 100%; - margin-left: 0; - margin-right: -1px; - border-radius: 6px 0 6px 6px; -} - -/* Inverted navbar - -------------------------- */ -.navbar-inverse .navbar-inner { +/* Inverted navbar */ +.navbar-inverse { background-color: var(--navbar-inverse-background); background-image: linear-gradient(to bottom, var(--navbar-inverse-background-highlight), var(--navbar-inverse-background)); border-color: var(--navbar-inverse-border); } -.navbar-inverse .brand, -.navbar-inverse .nav > li > a { +.navbar-inverse .navbar-brand, +.navbar-inverse .navbar-nav > li > a { color: var(--navbar-inverse-link-color); text-shadow: 0 -1px 0 rgba(0,0,0,.25); } -.navbar-inverse .brand:hover, -.navbar-inverse .brand:focus, -.navbar-inverse .nav > li > a:hover, -.navbar-inverse .nav > li > a:focus { +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus, +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { color: var(--navbar-inverse-link-color-hover); } -.navbar-inverse .brand { - color: var(--navbar-inverse-brand-color); +/* Responsive */ +@media (max-width: 979px) { + .navbar-toggle { + display: block; + } + + .navbar-collapse { + display: none; + width: 100%; + order: 1; + } + + .navbar-collapse.show { + display: flex; + flex-direction: column; + } + + .navbar-nav { + flex-direction: column; + width: 100%; + margin: 0; + } + + .navbar-nav > li > a { + height: auto; + padding: 9px 15px; + margin-bottom: 2px; + border-radius: 3px; + } + + .navbar-right { + margin-left: 0; + } + + .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + } + + .dropdown-menu:before, + .dropdown-menu:after { + display: none; + } } -.navbar-inverse .navbar-text { - color: var(--navbar-inverse-text); -} - -.navbar-inverse .nav > li > a:focus, -.navbar-inverse .nav > li > a:hover { - background-color: var(--navbar-inverse-link-background-hover); - color: var(--navbar-inverse-link-color-hover); -} - -.navbar-inverse .nav .active > a, -.navbar-inverse .nav .active > a:hover, -.navbar-inverse .nav .active > a:focus { - color: var(--navbar-inverse-link-color-active); - background-color: var(--navbar-inverse-link-background-active); -} - -/* Inline text links */ -.navbar-inverse .navbar-link { - color: var(--navbar-inverse-link-color); -} - -.navbar-inverse .navbar-link:hover, -.navbar-inverse .navbar-link:focus { - color: var(--navbar-inverse-link-color-hover); -} - -/* Dividers in navbar */ -.navbar-inverse .divider-vertical { - border-left-color: var(--navbar-inverse-background); - border-right-color: var(--navbar-inverse-background-highlight); -} - -/* Dropdowns */ -.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, -.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, -.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { - background-color: var(--navbar-inverse-link-background-active); - color: var(--navbar-inverse-link-color-active); -} - -.navbar-inverse .nav li.dropdown > a:hover .caret, -.navbar-inverse .nav li.dropdown > a:focus .caret { - border-top-color: var(--navbar-inverse-link-color-active); - border-bottom-color: var(--navbar-inverse-link-color-active); -} - -.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: var(--navbar-inverse-link-color); - border-bottom-color: var(--navbar-inverse-link-color); -} - -.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, -.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, -.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: var(--navbar-inverse-link-color-active); - border-bottom-color: var(--navbar-inverse-link-color-active); -} - -/* Navbar search */ -.navbar-inverse .navbar-search .search-query { - color: var(--white); - background-color: var(--navbar-inverse-search-background); - border-color: var(--navbar-inverse-search-border); - box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15); - transition: none; -} - -.navbar-inverse .navbar-search .search-query::placeholder { - color: var(--navbar-inverse-search-placeholder-color); -} - -/* Focus states */ -.navbar-inverse .navbar-search .search-query:focus, -.navbar-inverse .navbar-search .search-query.focused { - padding: 5px 15px; - color: var(--gray-dark); - text-shadow: 0 1px 0 var(--white); - background-color: var(--navbar-inverse-search-background-focus); - border: 0; - box-shadow: 0 0 3px rgba(0,0,0,.15); - outline: 0; -} - -/* Navbar collapse button */ -.navbar-inverse .btn-navbar { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: #0c0c0c; - background-image: linear-gradient(to bottom, #151515, #040404); - border-color: #040404 #040404 #000000; - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); +@media (min-width: 980px) { + .navbar-collapse { + display: flex !important; + } } diff --git a/css/responsive-navbar.css b/css/responsive-navbar.css deleted file mode 100644 index afda53f..0000000 --- a/css/responsive-navbar.css +++ /dev/null @@ -1,202 +0,0 @@ -/* - Responsive: Navbar - ======================================== -*/ - -/* TABLETS AND BELOW */ -@media (max-width: 979px) { - /* UNFIX THE TOPBAR */ - /* Remove any padding from the body */ - body { - padding-top: 0; - } - - /* Unfix the navbars */ - .navbar-fixed-top, - .navbar-fixed-bottom { - position: static; - } - - .navbar-fixed-top { - margin-bottom: var(--base-line-height); - } - - .navbar-fixed-bottom { - margin-top: var(--base-line-height); - } - - .navbar-fixed-top .navbar-inner, - .navbar-fixed-bottom .navbar-inner { - padding: 5px; - } - - .navbar .container { - width: auto; - padding: 0; - } - - /* Account for brand name */ - .navbar .brand { - padding-left: 10px; - padding-right: 10px; - margin: 0 0 0 -5px; - } - - /* COLLAPSIBLE NAVBAR */ - /* Nav collapse clears brand */ - .nav-collapse { - clear: both; - } - - /* Block-level the nav */ - .nav-collapse .nav { - float: none; - margin: 0 0 calc(var(--base-line-height) / 2); - } - - .nav-collapse .nav > li { - float: none; - } - - .nav-collapse .nav > li > a { - margin-bottom: 2px; - } - - .nav-collapse .nav > .divider-vertical { - display: none; - } - - .nav-collapse .nav .nav-header { - color: var(--navbar-text); - text-shadow: none; - } - - /* Nav and dropdown links in navbar */ - .nav-collapse .nav > li > a, - .nav-collapse .dropdown-menu a { - padding: 9px 15px; - font-weight: bold; - color: var(--navbar-link-color); - border-radius: 3px; - } - - /* Buttons */ - .nav-collapse .btn { - padding: 4px 10px 4px; - font-weight: normal; - border-radius: var(--base-border-radius); - } - - .nav-collapse .dropdown-menu li + li a { - margin-bottom: 2px; - } - - .nav-collapse .nav > li > a:hover, - .nav-collapse .nav > li > a:focus, - .nav-collapse .dropdown-menu a:hover, - .nav-collapse .dropdown-menu a:focus { - background-color: var(--navbar-background); - } - - .navbar-inverse .nav-collapse .nav > li > a, - .navbar-inverse .nav-collapse .dropdown-menu a { - color: var(--navbar-inverse-link-color); - } - - .navbar-inverse .nav-collapse .nav > li > a:hover, - .navbar-inverse .nav-collapse .nav > li > a:focus, - .navbar-inverse .nav-collapse .dropdown-menu a:hover, - .navbar-inverse .nav-collapse .dropdown-menu a:focus { - background-color: var(--navbar-inverse-background); - } - - /* Buttons in the navbar */ - .nav-collapse.in .btn-group { - margin-top: 5px; - padding: 0; - } - - /* Dropdowns in the navbar */ - .nav-collapse .dropdown-menu { - position: static; - top: auto; - left: auto; - float: none; - display: none; - max-width: none; - margin: 0 15px; - padding: 0; - background-color: transparent; - border: none; - border-radius: 0; - box-shadow: none; - } - - .nav-collapse .open > .dropdown-menu { - display: block; - } - - .nav-collapse .dropdown-menu:before, - .nav-collapse .dropdown-menu:after { - display: none; - } - - .nav-collapse .dropdown-menu .divider { - display: none; - } - - .nav-collapse .nav > li > .dropdown-menu:before, - .nav-collapse .nav > li > .dropdown-menu:after { - display: none; - } - - /* Forms in navbar */ - .nav-collapse .navbar-form, - .nav-collapse .navbar-search { - float: none; - padding: calc(var(--base-line-height) / 2) 15px; - margin: calc(var(--base-line-height) / 2) 0; - border-top: 1px solid var(--navbar-background); - border-bottom: 1px solid var(--navbar-background); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); - } - - .navbar-inverse .nav-collapse .navbar-form, - .navbar-inverse .nav-collapse .navbar-search { - border-top-color: var(--navbar-inverse-background); - border-bottom-color: var(--navbar-inverse-background); - } - - /* Pull right (secondary) nav content */ - .navbar .nav-collapse .nav.pull-right { - float: none; - margin-left: 0; - } - - /* Hide everything in the navbar save .brand and toggle button */ - .nav-collapse, - .nav-collapse.collapse { - overflow: hidden; - height: 0; - } - - /* Navbar button */ - .navbar .btn-navbar { - display: block; - } - - /* STATIC NAVBAR */ - .navbar-static .navbar-inner { - padding-left: 10px; - padding-right: 10px; - } -} - -/* DEFAULT DESKTOP */ -@media (min-width: 980px) { - /* Required to make the collapsing navbar work on regular desktops */ - .nav-collapse.collapse { - height: auto !important; - overflow: visible !important; - } -} diff --git a/css/responsive.css b/css/responsive.css deleted file mode 100644 index 038e905..0000000 --- a/css/responsive.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - Bootstrap Responsive - ======================================== - - Originally designed and built by @mdo and @fat - Converted to CSS variables -*/ - -/* - This file serves as the main import for responsive styles. - In a CSS variables implementation, you would include: - - 1. responsive-utilities.css - Utility classes for responsive layouts - 2. responsive-1200px-min.css - Styles for large desktops - 3. responsive-768px-979px.css - Styles for tablets to regular desktops - 4. responsive-767px-max.css - Styles for phones to portrait tablets - 5. responsive-navbar.css - Responsive navigation bar -*/ diff --git a/css/tests/navbar.html b/css/tests/navbar.html index 886942f..95e66e3 100644 --- a/css/tests/navbar.html +++ b/css/tests/navbar.html @@ -24,72 +24,70 @@ -
- -
-
-
- - - - - - Project name -
- - -
+
+ + + +
+

Navbar example

+

This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar + work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

+

+ View navbar docs » +

-
- -
-

Navbar example

-

This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar - work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

-

- View navbar docs » -

-
+
-
- - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +