Firefox userChrome.css - Hide address bar
Hello! I am using the userChrome.css file to hide the nav bar (# nav-bar) and show it when hovering the tabs.
The following code works a bit, but when I open the developer tools they overlap.
# nav-bar {
z-index: -1;
}
# navigator-toolbox: hover # nav-bar {
z-index: 1;
background-color: rgba (0,0,0,0.8)! important;
}
#browser {
margin-top: -45px;
}
Any advice to achieve the expected functionality? Thank you
gif showing the problem: https://s10.gifyu.com/images/firefox-customization-problem.gif
Gewysig op deur serhumanos
Gekose oplossing
thanks to @jscher2000 for his hint, In reddit-firefoxCss I got the code
https://www.reddit.com/r/FirefoxCSS/comments/rcogwz/comment/hnzf5rg
#nav-bar {
/* customize this value. */
--navbar-margin: -44px;
margin-top: var(--navbar-margin);
margin-bottom: 0;
z-index: -100;
transition: all 0.3s ease !important;
opacity: 0;
background-color: rgba(0,0,0,0.8) !important;
}
#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
margin-top: 0;
margin-bottom: var(--navbar-margin);
z-index: 100;
opacity: 1;
}
Lees dié antwoord in konteks
👍 0
All Replies (3)
(sorry I don't know how to delete this "answer")
Gewysig op deur serhumanos
Hi, you can use <pre> before and </pre> after your CSS to avoid the forum mistaking it for wikitext.
Probably you need to inject some padding at the top of the dev tools and just waste that space. A good site for advanced CSS tweaking is https://www.reddit.com/r/FirefoxCSS/
Gekose oplossing
thanks to @jscher2000 for his hint, In reddit-firefoxCss I got the code
https://www.reddit.com/r/FirefoxCSS/comments/rcogwz/comment/hnzf5rg
#nav-bar {
/* customize this value. */
--navbar-margin: -44px;
margin-top: var(--navbar-margin);
margin-bottom: 0;
z-index: -100;
transition: all 0.3s ease !important;
opacity: 0;
background-color: rgba(0,0,0,0.8) !important;
}
#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
margin-top: 0;
margin-bottom: var(--navbar-margin);
z-index: 100;
opacity: 1;
}