I am editing userchrome.css to customize #navigator-toolbox in Firefox. I want it to be partially hidden when not focused or hovered, and be shown otherwise. It should be partially hidden such that I can hover to it. Moreover, I am on Linux. When I press alt, #toolbar-menubar will show (that bar having File, Edit, View, History buttons).

The CSS hierarchy of #navigator-toolbox is

<toolbox id="navigator-toolbox">
    <toolbar id="toolbar-menubar"></toolbar>
    <toolbar id="TabsToolbar"></toolbar>
    <toolbar id="nav-bar"></toolbar> <!--url bar-->
    ...
</toolbox>

Currently I have the following CSS to hide #navigator-toolbox without considering state of #toolbar-menubar

#TabsToolbar {
  visibility: collapse;
}

#navigator-toolbox:not(:hover):not(:focus-within) {
    margin-top: -36px;
}

The problem with this CSS is that when I press alt, only #nav-bar shows as #toolbar-menubar is now active and pushes #nav-bar down while keeping margin-top: 36px;

Given that when #toolbar-menubar is hidden, inactive="true" attribute is set. When it is shown, the attribute will disappear.

How can I set #navigator-toolbox margin-top: -36px only when it is not hover, not focus within and #toolbar-menubar inactive="true" attribute is set?

I am editing userchrome.css to customize #navigator-toolbox in Firefox. I want it to be partially hidden when not focused or hovered, and be shown otherwise. It should be partially hidden such that I can hover to it. Moreover, I am on Linux. When I press alt, #toolbar-menubar will show (that bar having File, Edit, View, History buttons).

The CSS hierarchy of #navigator-toolbox is

<toolbox id="navigator-toolbox">
    <toolbar id="toolbar-menubar"></toolbar>
    <toolbar id="TabsToolbar"></toolbar>
    <toolbar id="nav-bar"></toolbar> <!--url bar-->
    ...
</toolbox>

Currently I have the following CSS to hide #navigator-toolbox without considering state of #toolbar-menubar

#TabsToolbar {
  visibility: collapse;
}

#navigator-toolbox:not(:hover):not(:focus-within) {
    margin-top: -36px;
}

The problem with this CSS is that when I press alt, only #nav-bar shows as #toolbar-menubar is now active and pushes #nav-bar down while keeping margin-top: 36px;

Given that when #toolbar-menubar is hidden, inactive="true" attribute is set. When it is shown, the attribute will disappear.

How can I set #navigator-toolbox margin-top: -36px only when it is not hover, not focus within and #toolbar-menubar inactive="true" attribute is set?

• html
• css
• firefox
• userchrome.css

1 Answer 1

My friend solved it for me

#navigator-toolbox:not(:hover):not(:focus-within):has(#toolbar-menubar[inactive]) {
    margin-top: -36px;
}