Sort out responsive navbar

This commit is contained in:
James Allen
2014-06-06 16:37:59 +01:00
parent b6217c401e
commit 0a1f1b8f38
4 changed files with 24 additions and 13 deletions
+1 -1
View File
@@ -38,7 +38,7 @@ html(itemscope, itemtype='http://schema.org/Product')
- if (typeof(bodyClasses) == "undefined") - if (typeof(bodyClasses) == "undefined")
- var bodyClasses = [] - var bodyClasses = []
body(class=bodyClasses) body(class=bodyClasses)
include menubar include layout/navbar
block content block content
- if (typeof(lookingForScribtex) != "undefined" && lookingForScribtex) - if (typeof(lookingForScribtex) != "undefined" && lookingForScribtex)
.modal.hide#scribtexModal .modal.hide#scribtexModal
@@ -3,7 +3,7 @@ nav.navbar.navbar-default
.navbar-header .navbar-header
button.navbar-toggle(data-toggle="collapse",data-target="#navbar-collapse") button.navbar-toggle(data-toggle="collapse",data-target="#navbar-collapse")
i.fa.fa-bars i.fa.fa-bars
a(href='/').navbar-brand ShareLaTeX a(href='/').navbar-brand
.navbar-collapse.collapse#navbar-collapse .navbar-collapse.collapse#navbar-collapse
ul.nav.navbar-nav.navbar-right ul.nav.navbar-nav.navbar-right
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

@@ -52,7 +52,7 @@
overflow-x: visible; overflow-x: visible;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent; //border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
&:extend(.clearfix all); &:extend(.clearfix all);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@@ -180,7 +180,7 @@
position: relative; position: relative;
float: right; float: right;
margin-right: @navbar-padding-horizontal; margin-right: @navbar-padding-horizontal;
.navbar-vertical-align(34px); //.navbar-vertical-align(34px);
background-color: transparent; background-color: transparent;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 2px solid @navbar-default-link-color; border: 2px solid @navbar-default-link-color;
@@ -370,12 +370,12 @@
padding: 1rem 2rem; padding: 1rem 2rem;
.navbar-brand { .navbar-brand {
color: @navbar-default-brand-color; background-image: url('/img/logo.png');
&:hover, background-repeat: no-repeat;
&:focus { height: 16px;
color: @navbar-default-brand-hover-color; margin-top: 10px;
background-color: @navbar-default-brand-hover-bg; padding: 0;
} width: 128px;
} }
.navbar-text { .navbar-text {
@@ -385,12 +385,11 @@
.navbar-nav { .navbar-nav {
> li > a { > li > a {
color: @navbar-default-link-color; color: @navbar-default-link-color;
border: 2px solid @navbar-default-link-color; border: 2px solid transparent;
border-radius: @border-radius-base; border-radius: @border-radius-base;
font-size: @font-size-base * .8; font-size: @font-size-base * .8;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
margin-left: 1rem;
padding: 10px 10px 11px; padding: 10px 10px 11px;
&:hover, &:hover,
@@ -416,6 +415,13 @@
background-color: @navbar-default-link-disabled-bg; background-color: @navbar-default-link-disabled-bg;
} }
} }
@media (min-width: @grid-float-breakpoint) {
> li > a {
border-color: @navbar-default-link-color;
margin-left: 1rem;
}
}
} }
.navbar-toggle { .navbar-toggle {
@@ -450,10 +456,15 @@
// Dropdowns get custom display when collapsed // Dropdowns get custom display when collapsed
.open .dropdown-menu { .open .dropdown-menu {
> li > a { > li > a {
border-radius: @border-radius-base;
font-size: @font-size-base * .8;
font-weight: 700;
line-height: 1;
padding: 12px 12px 13px 30px;
color: @navbar-default-link-color; color: @navbar-default-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-hover-color; color: #fff;
background-color: @navbar-default-link-hover-bg; background-color: @navbar-default-link-hover-bg;
} }
} }