On small resolutions, instead of overlapping, the "right" one will be
displayed below the "left" one. It might overlap page's title or
sitenotice, but this is less bad than rendering critical functionality
unreachable.
This also cleans up the CSS slightly, positioning left and right nav using
the same constructs (margins instead of absolute positioning).
Vector extension's ext.vector.collapsibleTabs had to be adjusted to work
with new styles; see change Ie34dce9a9 in Vector.
Bug: 20234
Change-Id: Iedaebefc139ecd7ad48867626b67c52c6d00121d
margin-right: 1em;
}
#left-navigation {
margin-right: 1em;
}
#left-navigation {
}
#p-personal {
right: 1em;
}
#p-personal {
right: 1em;
}
/* Navigation Containers */
#left-navigation {
}
/* Navigation Containers */
#left-navigation {
- position: absolute;
- left: 10em;
- top: 2.5em;
+ float: left;
+ margin-left: 10em;
+ margin-top: 2.5em;
+ /* When right nav would overlap left nav, it's placed below it
+ (normal CSS floats behavior). This rule ensures that no empty space
+ is shown between them due to right nav's margin-top. Page layout
+ is still broken, but at least the nav overlaps only the page title
+ instead of half the content. */
+ margin-bottom: -2.5em;
+ /* IE 6 double-margin bug fix */
+ display: inline;
}
#right-navigation {
float: right;
}
#right-navigation {
float: right;
/* Animate between standard and high definition layouts */
body.vector-animateLayout div#content,
/* Animate between standard and high definition layouts */
body.vector-animateLayout div#content,
-body.vector-animateLayout div#footer {
+body.vector-animateLayout div#footer,
+body.vector-animateLayout #left-navigation {
-moz-transition: margin-left 250ms, padding 250ms;
-webkit-transition: margin-left 250ms, padding 250ms;
-o-transition: margin-left 250ms, padding 250ms;
transition: margin-left 250ms, padding 250ms;
}
-moz-transition: margin-left 250ms, padding 250ms;
-webkit-transition: margin-left 250ms, padding 250ms;
-o-transition: margin-left 250ms, padding 250ms;
transition: margin-left 250ms, padding 250ms;
}
-body.vector-animateLayout #p-logo,
-body.vector-animateLayout #left-navigation {
+body.vector-animateLayout #p-logo {
-moz-transition: left 250ms;
-webkit-transition: left 250ms;
-o-transition: left 250ms;
-moz-transition: left 250ms;
-webkit-transition: left 250ms;
-o-transition: left 250ms;