Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox userChrome.css - Hide address bar

  • 3 replies
  • 1 has this problem
  • 360 views
  • Paskiausią atsakymą parašė serhumanos

more options

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

Pridėtos ekrano nuotraukos

Modified by serhumanos

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)

more options

(sorry I don't know how to delete this "answer")

Modified by serhumanos

Helpful?

more options

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/

Helpful?

more options

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;
}

Helpful?

Užduoti klausimą

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.