diff --git a/application/helpers/SurveyRuntimeHelper.php b/application/helpers/SurveyRuntimeHelper.php
index fdbea8f0ebc..5380d7b7473 100644
--- a/application/helpers/SurveyRuntimeHelper.php
+++ b/application/helpers/SurveyRuntimeHelper.php
@@ -1767,6 +1767,18 @@ private function setClassAndIds()
         // No JS alert
         $this->aSurveyInfo['class']['nojs'] = ' alert alert-danger ls-js-hidden warningjs ';
 
+        // NavBar
+        $this->aSurveyInfo['id']['navbar']            = 'navbar';
+        $this->aSurveyInfo['class']['navbar']         = ' navbar navbar-default navbar-fixed-top ';
+        $this->aSurveyInfo['class']['navbarheader']   = ' navbar-header ';
+        $this->aSurveyInfo['class']['navbartoggle']   = ' navbar-toggle collapsed ';
+        $this->aSurveyInfo['class']['navbarbrand']    = ' navbar-brand ';
+        $this->aSurveyInfo['class']['navbarcollapse'] = ' collapse navbar-collapse ';
+        $this->aSurveyInfo['class']['navbarlink']     = ' nav navbar-nav navbar-right navbar-action-link ';
+
+        $this->aSurveyInfo['attr']['navbartoggle']    = ' data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" ';
+        $this->aSurveyInfo['attr']['navbar']  =  $this->aSurveyInfo['attr']['navbarheader']  = $this->aSurveyInfo['attr']['navbarbrand'] = $this->aSurveyInfo['attr']['navbarcollapse']  = $this->aSurveyInfo['attr']['navbarlink'] = '';
+
 
         // Maybe add a plugin event here?
 
diff --git a/templates/default/views/subviews/nav_bar.twig b/templates/default/views/subviews/nav_bar.twig
index b42211eea1c..6c270b44042 100644
--- a/templates/default/views/subviews/nav_bar.twig
+++ b/templates/default/views/subviews/nav_bar.twig
@@ -11,16 +11,16 @@
 
     (¯`·._.·(¯`·._.· Bootstrap Navigation Bar ·._.·´¯)·._.·´¯)
 
-    This file renders a typical bootstrap navigation bar. 
+    This file renders a typical bootstrap navigation bar.
     See: https://getbootstrap.com/components/#navbar
 
     For the survey navigator ("Next", "Back", etc.), see: navigation/navigator.twig
 #}
 
 <!-- Bootstrap Navigation Bar -->
-<div class="navbar navbar-default navbar-fixed-top">
-    <div class="navbar-header ">
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+<div class="{{ aSurveyInfo.class.navbar }}  {{ aSurveyInfo.attr.navbar }}">
+    <div class="{{ aSurveyInfo.class.navbarheader }}  {{ aSurveyInfo.attr.navbarheader }} ">
+        <button type="button" class="{{ aSurveyInfo.class.navbartoggle }}" {{ aSurveyInfo.attr.navbartoggle }}  >
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -29,17 +29,17 @@
 
         {# Logo option #}
         {% if( aSurveyInfo.options.brandlogo == "on") %}
-            <div class="navbar-brand logo-container" >
+            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                 {{ image('./files/logo_w_s.png', aSurveyInfo.name, {"class": "logo"}) }}
             </div>
         {% else %}
-            <div class="navbar-brand" >
+            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                 {{ aSurveyInfo.name }}
             </div>
         {% endif %}
     </div>
-    <div id="navbar" class="collapse navbar-collapse">
-        <ul class="nav navbar-nav navbar-right navbar-action-link">
+    <div id="{{ aSurveyInfo.id.navbar }}" class="{{ aSurveyInfo.class.navbarcollapse }}" {{ aSurveyInfo.attr.navbarcollapse }} >
+        <ul class="{{ aSurveyInfo.class.navbarlink }}" {{ aSurveyInfo.attr.navbarlink }}>
             {{ include('./subviews/navigation/save_links.twig') }}
             {{ include('./subviews/navigation/clearall_links.twig') }}
             {{ include('./subviews/navigation/question_index_menu.twig') }}