diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 9c258fd1..fff122f6 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -70,7 +70,7 @@ gulp.task('dev:static', () => {
 });
 
 gulp.task('dev:doc', () => {
-  return gulp.src('**/README.md')
+  return gulp.src('README.md')
     .pipe(toc())
     .pipe(replace(/[^\n]*Table of Contents[^\n]*\n/g, ''))
     .pipe(gulp.dest('./'));
diff --git a/lib/app/css/styleguide-app.css b/lib/app/css/styleguide-app.css
index b90d2c84..70c7558a 100644
--- a/lib/app/css/styleguide-app.css
+++ b/lib/app/css/styleguide-app.css
@@ -384,6 +384,7 @@ Styleguide 3.1.1
   }
 
   .sg.sg-side-nav {
+    display: none;
     float: left;
     display: inline-block;
     width: 30%;
@@ -396,7 +397,6 @@ Styleguide 3.1.1
       overflow: scroll;
       transition: opacity .4s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     }
-
     .sg.option {
       text-align: center;
       a {
@@ -667,6 +667,7 @@ Styleguide 3.2.1
     height: 100%;
 
     h1 {
+      min-height: 70px;
       font-family: var(--secondary-font);
       font-family: $secondary-font;
       font-style: normal;
@@ -760,7 +761,6 @@ Styleguide 3.2.1
   }
   .sg.side-nav-search .sg.sg-search-field {
     margin-top: calc(var(--header-height)/2 - 18px);
-    margin-top: calc($header-height/2 - 18px);
     box-sizing : border-box;
     float: right;
     @media (--mobile) {
@@ -854,6 +854,7 @@ Styleguide 3.3.1
  */
 
 .sg.sg-top-nav {
+  display: none;
   clear: both;
   background-color: var(--nav-background-color);
   background-color: $nav-background-color;
@@ -861,6 +862,10 @@ Styleguide 3.3.1
   width: 100%;
 }
 
+.sg.sg-nav-visible {
+  display: block;
+}
+
 .sg.sg-top-nav-menu {
   padding: 0 var(--min-content-margin) 0 var(--min-content-margin);
   padding: 0 $min-content-margin 0 $min-content-margin;
diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
index 54404c28..c69e5792 100644
--- a/lib/app/js/controllers/main.js
+++ b/lib/app/js/controllers/main.js
@@ -17,11 +17,15 @@ angular.module('sgApp')
     $scope.variables = Variables.variables;
     $scope.toggleMenu = false;
 
-    $scope.toggleBool = function(toggleMenu) {
+    $scope.toggleSideNav = function(toggleMenu) {
       $scope.toggleMenu = !toggleMenu;
       return $scope.toggleMenu;
     };
 
+    $scope.isSideNav = function() {
+      return $scope.config.data.sideNav;
+    };
+
     // Bind variable to scope to wait for data to be resolved
     $scope.socketService = Socket;
 
@@ -41,7 +45,7 @@ angular.module('sgApp')
     $scope.hasSubsections = function(parentSection) {
       var result = false;
       angular.forEach($scope.sections.data, function(section) {
-        if(parentSection.reference === section.parentReference) {
+        if (parentSection.reference === section.parentReference) {
           result = true;
           return;
         }
diff --git a/lib/app/views/main.html b/lib/app/views/main.html
index 1c07798d..5268c015 100644
--- a/lib/app/views/main.html
+++ b/lib/app/views/main.html
@@ -10,8 +10,8 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
       </a>
       <pre ng-if="status.hasError">{{status.error.message}}</pre>
     </div>
-    <div class="sg sg-search-container" ng-class="{ 'side-nav-search': config.data.sideNav }">
-      <div class="sg-hamburger " ng-click="toggleBool(toggleMenu)" ng-hide="!config.data.sideNav" ng-class="{ 'sg-hamburger-active': !toggleMenu }">
+    <div class="sg sg-search-container" ng-class="{ 'side-nav-search': isSideNav() }">
+      <div class="sg-hamburger " ng-click="toggleSideNav(toggleMenu)" ng-hide="!isSideNav()" ng-class="{ 'sg-hamburger-active': !toggleMenu }">
         <div class="sg-hamburger-item top"></div>
         <div class="sg-hamburger-item middle"></div>
         <div class="sg-hamburger-item bottom"></div>
@@ -28,7 +28,7 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
   </div>
 </header>
 
-<nav class="sg sg-top-nav" ng-class="{'designerToolVisible' : designerTool.isVisible}" ng-if="!config.data.sideNav">
+<nav class="sg sg-top-nav" ng-class="{'designerToolVisible' : designerTool.isVisible, 'sg-nav-visible': !isSideNav()}">
   <ul class="sg sg-top-nav-menu">
     <li class="sg-nav-item">
       <a class="sg sg-nav-link"
@@ -59,13 +59,13 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
   </ul>
 </nav>
 
-<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-if="!config.data.sideNav">
+<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-show="!isSideNav()">
   <section ui-view class="sg sg-body full-width">
   </section>
 </div>
 
-<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-if="config.data.sideNav">
-  <div class="sg side-nav-toggle" ng-click="toggleBool(toggleMenu)">
+<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-show="isSideNav()">
+  <div class="sg side-nav-toggle" ng-click="toggleSideNav(toggleMenu)">
     {{ toggleMenu ? "&gt;&gt;" : "&lt;&lt;" }}
   </div>
   <nav class="sg sg-side-nav" ng-class="{ 'animate-show': toggleMenu}">
diff --git a/package.json b/package.json
index 3805dc06..12248c79 100644
--- a/package.json
+++ b/package.json
@@ -46,9 +46,9 @@
     "gulp-cssnext": "^1.0.1",
     "gulp-mustache": "~2.0.1",
     "gulp-postcss": "^6.1.0",
-    "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.3",
-    "gulp-util": "~3.0.5",
+    "gulp-util": "~3.0.7",
+    "gulp-rename": "^1.2.2",
     "jade": "^1.8.1",
     "kss": "~2.1.0",
     "lodash": "~3.10.1",
@@ -88,14 +88,13 @@
     "dependency-check": "~2.5.1",
     "gulp-babel": "^6.1.0",
     "gulp-bower": "~0.0.10",
-    "gulp-doctoc": "^0.1.2",
+    "gulp-doctoc": "^0.1.4",
     "gulp-istanbul": "~0.10.0",
     "gulp-jscs": "~3.0.2",
     "gulp-jshint": "~2.0.0",
     "gulp-mocha": "~2.2.0",
     "gulp-ng-annotate": "~1.1.0",
     "gulp-plumber": "~1.0.1",
-    "gulp-rename": "^1.2.2",
     "gulp-rimraf": "^0.2.0",
     "istanbul": "~0.4.1",
     "jscs": "~2.6.0",
diff --git a/test/angular/unit/controllers/main.test.js b/test/angular/unit/controllers/main.test.js
index 69df9804..e909d14a 100644
--- a/test/angular/unit/controllers/main.test.js
+++ b/test/angular/unit/controllers/main.test.js
@@ -77,10 +77,17 @@ describe('Controller: MainCtrl', function() {
     expect(scope.markupSection.isVisible).to.eql(true);
   });
 
-  describe('toggle navigation', function() {
-    it('should toggle navigation by inversing bool', function() {
+  describe('toggle sideNav', function() {
+    it('should inverse boolean', function() {
       scope.showMenu = true;
-      expect(scope.toggleBool(scope.showMenu)).to.eql(false);
+      expect(scope.toggleSideNav(scope.showMenu)).to.eql(false);
+    });
+  });
+
+  describe('sideNav configuration option true', function() {
+    it('should return true if sideNav configuration option is set true', function() {
+      scope.config.data.sideNav = true;
+      expect(scope.isSideNav()).to.eql(true);
     });
   });