How to disable floating or fixed menu bars?
So many websites have these info bars that stay at the top of the page as you scroll down, wasting valuable vertical space. I can remove them by blocking that element in adblocking extensions but I wonder if there was a way of getting rid of them entirely, perhaps something in about:config? I don't even know how to describe them. Is "floating" the right term or should it be "fixed" or "permanent"? Its hard to find something if you don't know its name!
All Replies (4)
It's unlikely that you will find an easy or universal way to prevent items from being fixed on your screen, since it depends entirely on how the website was designed. You'd likely find that automatically blocking all fixed elements would break a lot of websites.
This is usually done via a combination of CSS code and JavaScript code, so you will have to identify the code that is responsible for locking the menu bar at the top of the page. Hiding the menu bar usually isn't a good idea because that will prevent access to all menu items. Best would be to override CSS rules that position the menu bar absolutely fixed at the top of the window to make it scrollable.
> You'd likely find that automatically blocking all fixed elements would break a lot of websites.
Out of curiosity I went to about:config and searched for elements fixedelements fixed-elements All brought up its respective line with the options Boolean, Number and String. Can I do something with this?
devtools.inspector.show_pseudo_elements was False
> Best would be to override CSS rules that position the menu bar absolutely fixed at the top of the window to make it scrollable.
That WOULD be a dream! I know nothing about web design. This doesn't sound like something you learn in 10 minutes. Probably not even 10 hours!
If you want to try fixing this then you need some understanding of how web pages work and this is not the easiest subject to start with. Getting the selector for an element if you want to hide specific isn't that difficult: you can simply right-click and element and use Inspect Element to open the Inspector. In most cases you need to go up in the DOM tree to find the correct parent element.
You can't do this via about:config and changes made via the Inspector are only temporary and are lost once you close or refresh the page. The Inspector is useful for testing the effect of CSS code changes.
See also the Reddit website.