Made the top nav properly responsive on mobile.

This commit is contained in:
Martin Schröder 2015-06-01 14:35:33 +02:00
parent 619def4bc2
commit 68a8e2d42c
2 changed files with 27 additions and 19 deletions

View file

@ -36,36 +36,44 @@ h1, h2, h3, h4, h5, .navbar-nav {
/*** fill entire nav **/
.navbar .navbar-inner {
padding: 0;
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
@media screen and ( min-width: 768px ){
.navbar .nav li {
display: table-cell;
width: 16.666666667%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(250, 250, 250, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
}
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(250, 250, 250, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
@media screen and ( max-width: 768px ){
}
.navbar .nav li:first-child a {
border-left: 0;
/*border-radius: 3px 0 0 3px;*/
border-left: 0;
/*border-radius: 3px 0 0 3px;*/
}
.navbar .nav li:last-child a {
border-right: 0;
/*border-radius: 0 3px 3px 0;*/
border-right: 0;
/*border-radius: 0 3px 3px 0;*/
}
/*******/

View file

@ -1,4 +1,4 @@
<div class="navbar navbar-default" ng-controller="NavigationCtrl">
<div class="navbar navbar-default navbar-vodafone" ng-controller="NavigationCtrl">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only" translate>Toggle navigation</span>
@ -13,7 +13,7 @@
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" auto-active>
<li class="dropdown" ng-repeat="item in tree.children_list track by $index" style="width: 16.666666667%">
<li class="dropdown" ng-repeat="item in tree.children_list track by $index" >
<a href="#!{{item.path}}" role="button" style="width: 100%; text-align: center;">{{item.text | translate}} </a>
</li>
</ul>