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.

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.

enter greasemonkey

Now, we just write two lines of javascript to remove the navbar (you can also test this javascript out in the ctrl-shift-c Firefox Developer Tools by going to “Console” and then “JS” and entering in lines of code there). I used this script as a template. Simply specify where the script should apply & then which div to remove.

1

2

3

4

5

6

7

8

9

// ==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')[0].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

1

file:///home/nrw/Desktop/work/removenav.user.js

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.