This simple plugin checks if there already is an element with the class "slide-number" in the presentation. If so, it moves the slidenumber there.
Create an empty element with class "slide-number" in your document. For example, in a menubar like above.
Now you can style it and make it fit in your content. For example, give it a relative position.
For the menu you might use my Simplemenu plugin.
If you load Simplemenu before RelativeNumber, page numbers will also be exported correctly as PDF when using the Reveal.js ?print-pdf
function.