edit userChrome.css to hide tabstoolbar and nav-bar

Question

I would like to customize my mozilla interface to display in fullscreen without tabstoolbar and without navigation bar. I use ./chrome/userChrome.css like below:

#main-window {
   max-width:1920px !important;
   max-height:1200px !important;
}
#TabsToolbar{ 
   display: none
}
#nav-bar { 
   display: none 
}

Tried firefox -P my_profile www.google.com

Expected: Google page

Result: Blank page, and I've got google page after one click.

Using Microsoft Windows

Answer 1

I had a similar problem with firefox 86, somehow all pages were blank and I had to edit my userChrome.css to something like this from superuser.com. Also make sure userChrome.css is enabled, but since you get a white page it is probably used.

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

Answer 2

Try changing display: none to visibility: collapse.

Apparently some functions rely on the nav-bar existing, thus "hiding" instead of "removing" seems to do the trick, atleast it did for me.

Answer 3

On Firefox 110.0.1 the following CSS did the trick for me:

#titlebar {
    visibility: collapse;
}