Reduce nav-bar width
-
Hi folks, I've been playing about with the idea of reducing my complete nav-bar width as I dont need a url bar about 5 metres long :p. Now, I can achieve reducing its width of course without a problem, but there are two problems that I'm struggling with, firstly it is ALWAYS attached to the left side (I'd like it right side or in the middle, like beyond australis on firefox). Secondly when I do reduce the nav-bar/tool-bar there is another element underneath leaving a grey bar making the whole experiment pointless, I'm struggling to work out what exactly this is! as it doesn't allow me to inspect the element. Any pointers would be hugely appreciated. Sean wiiija.deviantart.com
-
Whoa! You've got a 5-metre display? Kudos! I'm jealous!
-
Haha, only a slight exaggeration
-
See below
-
I've done it for anybody interested!
.toolbar-addressbar {
visibility: hidden;
position: fixed;
opacity: 0;
z-index: 2;
transition: opacity .3s linear .7s, visibility 0s linear 1s;
width: 50%;
left: 25%;
right: 25%;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background: #303541 !important;
border-bottom: 1px solid #222 !important;
border-left: 1px solid #222 !important;
border-right: 1px solid #222 !important;
}
#header:hover ~ #main .toolbar-addressbar,
.toolbar-addressbar:hover {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}This places it center, left: 50% and zero on right fixes to right of screen
And here is how it looks, it auto-hides though:
-