adding off canvas widget

robwilde · Dec 19, 2014 · 9ed6978 · 9ed6978
1 parent 50f5f94
commit 9ed6978
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 6 deletions.
diff --git a/css/theme.css b/css/theme.css
diff --git a/header.php b/header.php
@@ -17,6 +17,8 @@
 </head>
 
 <body <?php body_class(); ?>>
+
+
 
 <div id="page" class="hfeed site">
 
@@ -30,8 +32,8 @@
                         <div class="navbar navbar-inverse navbar-fixed-top">
 
                              <div class="container">
-                                 
-                                 <div class="col-md-12">
+
+                                <div class="col-md-<?php if ( is_active_sidebar( 'off-canvas' ) ): ?>11<?php else : ?>12<?php endif; ?>">
 
                                 <div class="navbar-header">
 
@@ -60,12 +62,44 @@
                                     )
                                 ); ?>
 
-                        </div> <!-- .col-md-12 end -->
+                        </div> <!-- .col-md-11 end -->
+                                 <?php if ( is_active_sidebar( 'off-canvas' ) ): ?>
+                        <div class="col-md-1 text-right">
+                            <!-- Off Canvas Toggle -->
+                            <a class="off-canvas-toggle-link" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
+                                menu
+                            </a>
+                        </div>
+                                 <?php else : ?>
+
+                                 <?php endif; ?>
 
                     </div> <!-- .container -->
 
             </div><!-- .navbar -->
+
+            <?php if ( is_active_sidebar( 'off-canvas' ) ): ?>
+                <div class="navmenu navmenu-inverse navmenu-fixed-left offcanvas">
+                    <!-- Off Canvas Toggle -->
+                    <a class="off-canvas-toggle-link" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
+                        menu
+                    </a>
+
+            <!-- Off Canvas Widget itself -->
+
+                <?php dynamic_sidebar( 'off-canvas' ); ?>
+
+                </div>
+            <?php else : ?>
+
+            <?php endif; ?>
 
         </nav><!-- .site-navigation -->
 
-    </div><!-- .wrapper-navbar end -->
+    </div><!-- .wrapper-navbar end -->
+
+
+
+
+
+
diff --git a/inc/widgets.php b/inc/widgets.php
@@ -19,5 +19,15 @@ function understrap_widgets_init() {
         'before_title'  => '',
         'after_title'   => '',
     ) );
+
+    register_sidebar( array(
+        'name'          => __( 'Off Canvas', 'understrap' ),
+        'id'            => 'off-canvas',
+        'description'   => '',
+        'before_widget' => '<div class="col-md-12">',
+        'after_widget'  => '</div>',
+        'before_title'  => '',
+        'after_title'   => '',
+    ) );
 }
 add_action( 'widgets_init', 'understrap_widgets_init' );
diff --git a/sass/theme.css.map b/sass/theme.css.map
diff --git a/sass/understrap/understrap.scss b/sass/understrap/understrap.scss
@@ -4,4 +4,8 @@ body { padding-top: 50px; }
 // Adding basic Wordpress classes to pass the Wordpress.org tests
 .sticky, .gallery-caption, .bypostauthor {
 font-size:inherit;
+}
+// Workaround for Jasny off canvas nav on right hand side
+.navmenu-fixed-right {
+  left: auto !important;
 }