diff --git a/changelog.txt b/changelog.txt
index 73ef2deb..8110fcdd 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -4,7 +4,7 @@ OPENSEADRAGON CHANGELOG
 3.2.0: (in progress)
 
 * Improved the constraints that keep the image in the viewer, specifically when zoomed out a lot (#2160 @joedf)
-* You can now provide an element for the navigator (as an alternative to an ID); currently only works when you create the navigator yourself (#2166 @cameronbaney @joedf)
+* You can now provide an element for the navigator (as an alternative to an ID) (#1303 @cameronbaney, #2166 #2175 @joedf)
 
 3.1.0:
 
diff --git a/src/navigator.js b/src/navigator.js
index f4da5b3a..cb46962e 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -62,13 +62,13 @@ $.Navigator = function( options ){
         if ( options.element ) {
             if ( options.id ){
                 $.console.warn("Given option.id for Navigator was ignored since option.element was provided and is being used instead.");
+            }
+
+            // Don't overwrite the element's id if it has one already
+            if ( options.element.id ) {
+                options.id = options.element.id;
             } else {
-                // Don't overwrite the element's id if it has one already
-                if ( options.element.id ) {
-                    options.id = options.element.id;
-                } else {
-                    options.id = 'navigator-' + $.now();
-                }
+                options.id = 'navigator-' + $.now();
             }
 
             this.element = options.element;
diff --git a/src/openseadragon.js b/src/openseadragon.js
index c0ecb03a..9cd6ad9f 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -410,6 +410,11 @@
   * @property {Boolean} [showNavigator=false]
   *     Set to true to make the navigator minimap appear.
   *
+  * @property {Element} [navigatorElement=null]
+  *     The element to hold the navigator minimap.
+  *     If an element is specified, the Id option (see navigatorId) is ignored.
+  *     If no element nor ID is specified, a div element will be generated accordingly.
+  *
   * @property {String} [navigatorId=navigator-GENERATED DATE]
   *     The ID of a div to hold the navigator minimap.
   *     If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, navigator[Top|Left|Height|Width] and navigatorAutoFade options will be ignored.
@@ -1265,6 +1270,7 @@ function OpenSeadragon( options ){
 
             //VIEWPORT NAVIGATOR SETTINGS
             showNavigator:              false,
+            navigatorElement:           null,
             navigatorId:                null,
             navigatorPosition:          null,
             navigatorSizeRatio:         0.2,
diff --git a/src/viewer.js b/src/viewer.js
index c73a3314..df553e4c 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -431,6 +431,7 @@ $.Viewer = function( options ) {
     //Instantiate a navigator if configured
     if ( this.showNavigator){
         this.navigator = new $.Navigator({
+            element:           this.navigatorElement,
             id:                this.navigatorId,
             position:          this.navigatorPosition,
             sizeRatio:         this.navigatorSizeRatio,