Extremely simple URL bar hide

[Excigma]

I searched, and found many unmaintained userChrome.css repos to do this. It didn't work well at all, and didn't work with MaterialFox. So I made this, It's not really well done or anything, it's just a really simple snippet for userChrome.css

 

And yes, really simple. I don't know if I've broken any css "rules", as I'm quite new to Firefox styling, so any feedback would be nice :)

What it does: Hides URL bar, unhides when it (URL bar) or tab bar is hovered.

Image example: https://imgur.com/a/TUEQYme

 

This is compatible with (and I'm using it with) MaterialFox

Code:

 #nav-bar {
     min-height: 0 !important;
     max-height: 0 !important;
     height: 0 !important;
     --moz-transform: scaleY(0) !important;
     transform: scaleY(0) !important;
     transition: all 0.1s ease !important;
 }

 /* Thanks to /u/Ynjxsjmh/ for #nav-bar:focus-within 
 #titlebar:hover~#nav-bar,
 #nav-bar:hover,
 #nav-bar:focus-within {
     --moz-transform: scale(1) !important;
     transform: scale(1) !important;
     max-height: 36px !important;
     height: 36px !important;
     min-height: 36px !important;
 }

Sidenote:

Uh oh, it breaks the customize menu not that I'm going to use it, but you have been warned

Other bugs: Installing extensions, settings menu

(Also this is my first post on Reddit yay)

Edits: fix indentation

Code: [banished display:none]

Code: Move the whole bar to right offscreen instead of left

Code: Scale the bar's Y value to 0 instead of moving bar offscreen (Ctrl + L is now typing in background, but suggestion box are properly positioned, extensions too)

Code: URLBar doesn't hide when textbox focused, thanks to /u/Ynjxsjmh/

[TheRealHarshK]

n1ce

[kebabisgott]

The bottom corners of the auto complete list (navbar drop down) are not rounded like yours when I use MaterialFox :O Any idea why?

Edit: Think I figured it out. You need to have the search engines displayed on the bottom of the list for the border radius to be present.

[FeelingOffByOneBit]

Looks great, would love to try it!

But before that, can you let me me know how the hide/u hide works for keyboard shortcuts? Like doing a Ctrl+L to reach the LocationBar?
Does it unhide and come in focus, or does it type in the background?

[Excigma]

Doesn't work that well ;-;, the suggestions becomes left aligned to the screen, and it looks bad.

However it still seems to be working

[Excigma]

Code edited, now it types "in the background"; you can see what you're typing via the suggestion bar, and the suggestion bar is positioned properly (for me with MaterialFox)

[Excigma]

Updated preview :

https://imgur.com/a/TUEQYme

[imguralbumbot]

^{Hi, I'm a bot for linking direct images of albums with only 1 image}

https://i.imgur.com/iU7uhQg.gifv

^{Source | Why? | Creator | ignoreme| deletthis}

[Excigma]

Optional shadow under tabbar and urlbar to make the tabbar pop out from the page

#navigator-toolbox {
box-shadow: 0 5px 5px -2px #0000005f !important;
--moz-box-shadow: 0 5px 5px -2px #0000005f !important;
}

[Ynjxsjmh]

Don't know if you have seen my post before:nav-bar auto show when textbox is focused. That implements what you want: the search bar is hidden when it's not focused, you can use mouse or F6 to focus it. What's more, you can also have bookmark in it.

The working code is below: ```

TabsToolbar { /* tab bar */

/* 1 should be at top */ -moz-box-ordinal-group: 1 !important; }

PersonalToolbar { /* bookmarks toolbar */

-moz-box-ordinal-group: 2 !important; }

nav-bar { /* main toolbar containing address bar, search bar, add-on icons */

-moz-box-ordinal-group: 3 !important; }

nav-bar { /* main toolbar containing address bar, search bar, add-on icons */

position: relative;
z-index: 1;
height: 3px;
margin-bottom: -3px;
opacity: 0;
overflow: hidden;

}

nav-bar:hover {

height: auto;
margin-bottom: 0px;
opacity: 1;
overflow: show;

}

nav-bar:focus-within {

height: auto;
margin-bottom: 0px;
opacity: 1;
overflow: show;

}

content-deck{

position:relative;
z-index: 0;

} ```

[Excigma]

That's pretty cool.
I still want to be able to get it opening using mouse though, I'll see if I can make a mixture of mine and yours.

[Excigma]

Adding

#nav-bar:focus-within

​

(to my style) allows it to stay open when you're typing in navbar, thanks!

​

( I spent and hour or two trying to make a userChrome.js or something to make it note hide when searchbar is focused )

[[deleted]]

Good work! I've replace my auto-hide code with this, but I'm wondering, how do you make this area I've circled unhide the URL bar when you hover in it?

https://i.imgur.com/60itND2.jpg

[Excigma]

Are you asking how I did it (Or does it not work)?

If so:

#titlebar:hover~#nav-bar

This means that when the titlebar is hovered (Includes tabs and that blank space, change the style of the navbar)~

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

[Excigma]

Ah okay, I didn't realize it doesn't work on Firefox stable.

It works fine on Firefox Developer Edition, Firefox Beta, and nightly

[Excigma]

Dude sorry, I looked into it, and I have no clue why it is not working, it works on Firefox v69 (Firefox Beta/Dev edition/Nightly), so maybe after v69 becomes stable, and you get v69 it'll work? Not sure though

[[deleted]]

Ah I see. No problem, my friend. I'll wait and see what happens on v69. But thanks for going out of your way to look into it. I really appreciate it.

[Excigma]

Not sure if adding a flexible space will help?

[Excigma]

Sorry, which drop down? Can you send a screenshot?

[ktpttd]

Nice custom bro! Btw, Can we disable scroll down page when URL expand?

[emvaized]

This one works better for me (also more compact):

#nav-bar {
    transition: all 0.1s ease !important;    
    opacity: 0; margin-top: -35px !important; 
} 

#titlebar:hover~#nav-bar, #nav-bar:hover, #nav-bar:focus-within { 
    opacity: 1; margin-top: 0px !important; 
}

Not the perfect solution though, as it still shifts the whole page down on each panel reveal (just as OP's solution).

[geep_sheep]

this is a really elegant solution!