diff --git a/docs/configuration.md b/docs/configuration.md
index cd45fbe3d..87fcc8ad5 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -88,6 +88,19 @@ window.$docsify = {
 };
 ```
 
+## navEl
+
+- Type: `String`
+- Default: `null`
+
+The DOM element to use for rendering the navbar. It can be a CSS selector string or an actual [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).  If `null`, the first `<nav>` element on the page is used. If it doesn't exist, it is created at the top of the DOM.
+
+```js
+window.$docsify = {
+  nav_el: '#navbar,
+};
+```
+
 ## loadSidebar
 
 - Type: `Boolean|String`
diff --git a/src/core/render/index.js b/src/core/render/index.js
index d0e6c4626..3529e1abd 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -300,9 +300,10 @@ export function Render(Base) {
     }
 
     _renderNav(text) {
-      text && this._renderTo('nav', this.compiler.compile(text));
+      text &&
+        this._renderTo(this.config.navEl || 'nav', this.compiler.compile(text));
       if (this.config.loadNavbar) {
-        getAndActive(this.router, 'nav');
+        getAndActive(this.router, this.config.navEl || 'nav');
       }
     }
 
@@ -409,10 +410,9 @@ export function Render(Base) {
         window.__current_docsify_compiler__ = this.compiler;
       }
 
-      const id = config.el || '#app';
-      const navEl = dom.find('nav') || dom.create('nav');
+      const el = dom.find(config.el || '#app');
+      const navEl = dom.find(config.navEl || 'nav') || dom.create('nav');
 
-      const el = dom.find(id);
       let html = '';
       let navAppendToTarget = dom.body;
 
@@ -442,7 +442,7 @@ export function Render(Base) {
         this.rendered = true;
       }
 
-      if (config.mergeNavbar && isMobile) {
+      if (config.mergeNavbar && isMobile && !config.navEl) {
         navAppendToTarget = dom.find('.sidebar');
       } else {
         navEl.classList.add('app-nav');
@@ -453,7 +453,7 @@ export function Render(Base) {
       }
 
       // Add nav
-      if (config.loadNavbar) {
+      if (config.loadNavbar && !config.navEl) {
         dom.before(navAppendToTarget, navEl);
       }
 
diff --git a/test/e2e/nav.test.js b/test/e2e/nav.test.js
new file mode 100644
index 000000000..bb386b118
--- /dev/null
+++ b/test/e2e/nav.test.js
@@ -0,0 +1,38 @@
+const docsifyInit = require('../helpers/docsify-init');
+
+describe(`Navbar tests`, function() {
+  test('specify custom navbar element in config with nav_el', async () => {
+    const docsifyInitConfig = {
+      html: `
+        <html>
+            <body>
+            <nav id="mynav"></nav>
+            <div id="app"></nav>
+            </body>
+        </html>
+      `,
+      markdown: {
+        navbar: `
+          - [Foo](foo)
+          - [Bar](bar)
+        `,
+        homepage: `
+          # hello world
+          foo
+        `,
+      },
+      config: {
+        nav_el: '#mynav',
+      },
+    };
+
+    await docsifyInit(docsifyInitConfig);
+
+    // Check that our custom <nav> element contains nav links
+    let navHTML;
+    navHTML = await page.$eval('#mynav', el => el.innerHTML);
+    expect(navHTML).toMatch('<li><a href="#/foo" title="Foo">Foo</a></li>');
+    navHTML = await page.$eval('#mynav', el => el.innerHTML);
+    expect(navHTML).toMatch('<li><a href="#/bar" title="Bar">Bar</a></li>');
+  });
+});
