I wanted to consistently remove the top navbar (here in purple) on a website for some GUI documentation I’m working on (yep, for Arvados). Basically, the purple navbar doesn’t add any useful info and takes up limited real-estate in my screenshots.
My initial method was to delete it using chrome / firefox’s powerful built-in inspector tools. ctrl-shift-c brings them up.
After selecting the correct div, I can just hit del and it will delete that section of code, thus removing the navbar. (control-z to undo if you delete the wrong section). However, this doesn’t persist across refreshes/clicks to other pages.
// ==UserScript== // @name Arvados: Remove Top Navbar // @namespace nouyang // @description Removes the div in front of the image // @include https://workbench.qr1hi.arvadosapi.com/* // @version 0.0.1 // ==/UserScript== document.getElementsByClassName('navbar-fixed-top').remove()
Save as “removenav.user.js”
UPDATE 31 July 2015: To explain a bit further, the extension “.user.js” is special to Greasemonkey. Also, the “@include” line indicates what domain / URLs / pages this particular script should be active on.
According to their manual, I just need to visit any “.user.js” file in my browser and Greasemonkey will offer to install it. Sure enough, drag-and-drop the file into Firefox or enter it into your Firefox location bar
and greasemonkey offers to install it. Bam! Done. Make sure greasemonkey is enabled and that you haven’t made typos (for instance, http vs https) and then if you visit your website, the div should be gone.