![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
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
Modified
Chosen solution
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; }Skaityti atsakymą kartu su kontekstu 👍 0
All Replies (3)
(sorry I don't know how to delete this "answer")
Modified
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/
Chosen Solution
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; }