added id property to navbar, required to open the "hamburger" menu

fixed navbar dropdown menu rendering for small devices added optional highdensity-menu class useful to handle the automatic menu for webs ites that have several pages
giansi · Feb 23, 2016 · c0b5cd9 · c0b5cd9
1 parent 2516542
commit c0b5cd9
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,13 @@
-# v1.0.0-RC
+# v1.0.0-rc.1
+## 02/23/2016
+1. [](#bugfix)
+    * Added id property to navbar required to open the "hamburger" menu
+    * Fixed navbar dropdown menu rendering for small devices
+
+2.[](#new)
+    * Added optional highdensity-menu class useful to handle the automatic menu for webs ites that have several pages
+
+# v1.0.0-rc
 ## 02/18/2016
 
 1. [](#new)

diff --git a/blueprints.yaml b/blueprints.yaml
@@ -1,5 +1,5 @@
 name: Gravstrap
-version: 1.0.0-RC
+version: 1.0.0-rc.1
 description: "Gravstrap is a Grav plugin that provides Bootstrap components as shortcodes. It has 30+ basic, modules and bootstrap shortcodes"
 icon: share-alt
 author:

diff --git a/css/gravstrap_navbar.css b/css/gravstrap_navbar.css
@@ -7,7 +7,7 @@
   transition: all 0.5s ease;
   padding: 0.5rem 8rem;
 }
-@media screen and (max-width: 550px) {
+@media screen and (max-width: 768px) {
   .navbar {
     padding: 0.5rem;
   }
@@ -83,6 +83,15 @@
   -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
   transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 }
+@media screen and (max-width: 768px) {
+  .navbar .navbar-nav > li > .dropdown-menu, .navbar .dropdown-menu {
+    position: inherit !important;
+    display: none !important;
+  }
+  .navbar .navbar-nav > li > .dropdown-menu a, .navbar .dropdown-menu a {
+    color: #fff !important;
+  }
+}
 .navbar .navbar-nav > li.open > .dropdown-menu, .navbar .open .dropdown-menu {
   -moz-transform: scale(1);
   -ms-transform: scale(1);
@@ -91,6 +100,7 @@
   -webkit-filter: none;
   filter: none;
   opacity: 1;
+  display: block !important;
 }
 .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
   border-left: 11px solid transparent;
@@ -101,6 +111,11 @@
   left: 100%;
   margin-left: -90%;
 }
+@media screen and (max-width: 768px) {
+  .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
+    display: none !important;
+  }
+}
 .navbar .navbar-right .dropdown-menu:before, .navbar .navbar-right .dropdown-menu:after {
   margin-left: -30%;
 }
@@ -132,13 +147,30 @@
 .navbar .dropdown.open > a, .navbar .dropdown.open > a:hover, .navbar .dropdown.open > a:focus, .navbar .dropdown.open > a:active {
   color: #fff;
 }
+.navbar .navbar-toggle {
+  background-color: #333;
+}
+@media screen and (max-width: 1170px) {
+  .navbar .highdensity-menu {
+    max-width: 400px;
+    padding-top: 2px;
+  }
+  .navbar .highdensity-menu li a {
+    padding: 2px 6px;
+  }
+}
 
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
   background-color: transparent;
 }
 
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover {
+  background-color: #333;
+}
+
 .navbar.scrolled {
   background-color: #fff;
   border-bottom: 0;
@@ -150,7 +182,7 @@
   opacity: 0.9;
   box-shadow: 0 0.05rem 1rem #333;
 }
-@media screen and (max-width: 550px) {
+@media screen and (max-width: 768px) {
   .navbar.scrolled {
     padding: 0.5rem;
   }
@@ -226,6 +258,15 @@
   -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
   transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 }
+@media screen and (max-width: 768px) {
+  .navbar.scrolled .navbar-nav > li > .dropdown-menu, .navbar.scrolled .dropdown-menu {
+    position: inherit !important;
+    display: none !important;
+  }
+  .navbar.scrolled .navbar-nav > li > .dropdown-menu a, .navbar.scrolled .dropdown-menu a {
+    color: #fff !important;
+  }
+}
 .navbar.scrolled .navbar-nav > li.open > .dropdown-menu, .navbar.scrolled .open .dropdown-menu {
   -moz-transform: scale(1);
   -ms-transform: scale(1);
@@ -234,6 +275,7 @@
   -webkit-filter: none;
   filter: none;
   opacity: 1;
+  display: block !important;
 }
 .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
   border-left: 11px solid transparent;
@@ -244,6 +286,11 @@
   left: 100%;
   margin-left: -90%;
 }
+@media screen and (max-width: 768px) {
+  .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
+    display: none !important;
+  }
+}
 .navbar.scrolled .navbar-right .dropdown-menu:before, .navbar.scrolled .navbar-right .dropdown-menu:after {
   margin-left: -30%;
 }
@@ -275,6 +322,18 @@
 .navbar.scrolled .dropdown.open > a, .navbar.scrolled .dropdown.open > a:hover, .navbar.scrolled .dropdown.open > a:focus, .navbar.scrolled .dropdown.open > a:active {
   color: #6e6e6e;
 }
+.navbar.scrolled .navbar-toggle {
+  background-color: #333;
+}
+@media screen and (max-width: 1170px) {
+  .navbar.scrolled .highdensity-menu {
+    max-width: 400px;
+    padding-top: 2px;
+  }
+  .navbar.scrolled .highdensity-menu li a {
+    padding: 2px 6px;
+  }
+}
 
 .navbar {
   background-color: transparent;
@@ -285,7 +344,7 @@
   transition: all 0.5s ease;
   padding: 0.5rem 8rem;
 }
-@media screen and (max-width: 550px) {
+@media screen and (max-width: 768px) {
   .navbar {
     padding: 0.5rem;
   }
@@ -361,6 +420,15 @@
   -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
   transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 }
+@media screen and (max-width: 768px) {
+  .navbar .navbar-nav > li > .dropdown-menu, .navbar .dropdown-menu {
+    position: inherit !important;
+    display: none !important;
+  }
+  .navbar .navbar-nav > li > .dropdown-menu a, .navbar .dropdown-menu a {
+    color: #fff !important;
+  }
+}
 .navbar .navbar-nav > li.open > .dropdown-menu, .navbar .open .dropdown-menu {
   -moz-transform: scale(1);
   -ms-transform: scale(1);
@@ -369,6 +437,7 @@
   -webkit-filter: none;
   filter: none;
   opacity: 1;
+  display: block !important;
 }
 .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
   border-left: 11px solid transparent;
@@ -379,6 +448,11 @@
   left: 100%;
   margin-left: -90%;
 }
+@media screen and (max-width: 768px) {
+  .navbar .dropdown-menu:before, .navbar .dropdown-menu:after, .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
+    display: none !important;
+  }
+}
 .navbar .navbar-right .dropdown-menu:before, .navbar .navbar-right .dropdown-menu:after {
   margin-left: -30%;
 }
@@ -410,6 +484,18 @@
 .navbar .dropdown.open > a, .navbar .dropdown.open > a:hover, .navbar .dropdown.open > a:focus, .navbar .dropdown.open > a:active {
   color: #fff;
 }
+.navbar .navbar-toggle {
+  background-color: #333;
+}
+@media screen and (max-width: 1170px) {
+  .navbar .highdensity-menu {
+    max-width: 400px;
+    padding-top: 2px;
+  }
+  .navbar .highdensity-menu li a {
+    padding: 2px 6px;
+  }
+}
 
 .navbar.scrolled {
   background-color: #fff;
@@ -422,7 +508,7 @@
   opacity: 0.9;
   box-shadow: 0 0.05rem 1rem #333;
 }
-@media screen and (max-width: 550px) {
+@media screen and (max-width: 768px) {
   .navbar.scrolled {
     padding: 0.5rem;
   }
@@ -498,6 +584,15 @@
   -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
   transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 }
+@media screen and (max-width: 768px) {
+  .navbar.scrolled .navbar-nav > li > .dropdown-menu, .navbar.scrolled .dropdown-menu {
+    position: inherit !important;
+    display: none !important;
+  }
+  .navbar.scrolled .navbar-nav > li > .dropdown-menu a, .navbar.scrolled .dropdown-menu a {
+    color: #fff !important;
+  }
+}
 .navbar.scrolled .navbar-nav > li.open > .dropdown-menu, .navbar.scrolled .open .dropdown-menu {
   -moz-transform: scale(1);
   -ms-transform: scale(1);
@@ -506,6 +601,7 @@
   -webkit-filter: none;
   filter: none;
   opacity: 1;
+  display: block !important;
 }
 .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
   border-left: 11px solid transparent;
@@ -516,6 +612,11 @@
   left: 100%;
   margin-left: -90%;
 }
+@media screen and (max-width: 768px) {
+  .navbar.scrolled .dropdown-menu:before, .navbar.scrolled .dropdown-menu:after {
+    display: none !important;
+  }
+}
 .navbar.scrolled .navbar-right .dropdown-menu:before, .navbar.scrolled .navbar-right .dropdown-menu:after {
   margin-left: -30%;
 }
@@ -547,3 +648,15 @@
 .navbar.scrolled .dropdown.open > a, .navbar.scrolled .dropdown.open > a:hover, .navbar.scrolled .dropdown.open > a:focus, .navbar.scrolled .dropdown.open > a:active {
   color: #6e6e6e;
 }
+.navbar.scrolled .navbar-toggle {
+  background-color: #333;
+}
+@media screen and (max-width: 1170px) {
+  .navbar.scrolled .highdensity-menu {
+    max-width: 400px;
+    padding-top: 2px;
+  }
+  .navbar.scrolled .highdensity-menu li a {
+    padding: 2px 6px;
+  }
+}
diff --git a/sass/lib/sass/mixins/_navbar.sass b/sass/lib/sass/mixins/_navbar.sass
@@ -11,7 +11,7 @@
     +transition($narbar-transition)
     padding: $navbar-padding
 
-    @media screen and (max-width: 550px)
+    @media screen and (max-width: 768px)
         padding: 0.5rem
 
         .navbar-collapse
@@ -56,7 +56,7 @@
         > .active > a, > .active > a:hover
             background-color: $navbar-bg-color
 
-    .navbar-nav > li > .dropdown-menu, .dropdown-menu
+    .navbar-nav > li > .dropdown-menu, .dropdown-menu,
         display: block
         margin: 0
         padding: 0
@@ -71,10 +71,18 @@
         +transition(all, 100ms, cubic-bezier(0.950, 0.050, 0.795, 0.035))
         +transition-timing-function(cubic-bezier(0.950, 0.050, 0.795, 0.035))
 
+        @media screen and (max-width: 768px)
+            position: inherit !important
+            display: none !important
+
+            a
+                color: #fff !important
+
     .navbar-nav > li.open > .dropdown-menu, .open .dropdown-menu
         +transform(scale(1))
         +filter(none)
         opacity: 1
+        display: block !important
 
     %triangle
         border-left: 11px solid rgba(0, 0, 0, 0)
@@ -85,6 +93,9 @@
         left: 100%
         margin-left: -90%
 
+        @media screen and (max-width: 768px)
+            display: none !important
+
     .navbar-right %triangle
         margin-left: -30%
 
@@ -118,6 +129,21 @@
     .dropdown.open > a, .dropdown.open > a:hover, .dropdown.open > a:focus, .dropdown.open > a:active
         color: $navbar-accent-color
 
+    .navbar-toggle
+        background-color: #333
+
+
+
+    .highdensity-menu
+
+        @media screen and (max-width: 1170px)
+            max-width: 400px
+            padding-top: 2px
+
+            li
+                a
+                    padding: 2px 6px
+
 .navbar
     +navbar()
 
@@ -126,6 +152,10 @@
 .navbar-default .navbar-nav > .open > a:focus
     background-color: transparent
 
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover
+    background-color: #333
+
 .navbar.scrolled
     +navbar(#fff, #6e6e6e, #6e6e6e, #010101, #6e6e6e, #010101, #010101)
     opacity: 0.9

diff --git a/shortcodes/Bootstrap/NavbarShortcode.php b/shortcodes/Bootstrap/NavbarShortcode.php
@@ -65,6 +65,8 @@ protected function template()
     protected function renderOutput(ShortcodeInterface $shortcode)
     {
         return $this->grav['twig']->processTemplate($this->template(), [
+            'id' => $shortcode->getParameter('id'),
+            'name' => $shortcode->getParameter('name'),
             'fixed' => $shortcode->getParameter('fixed'),
             'container' => $this->stringToBoolean($shortcode->getParameter('container')),
             'brand_text' => $shortcode->getParameter('brand_text'),

diff --git a/templates/bootstrap/navbar.html.twig b/templates/bootstrap/navbar.html.twig
@@ -2,7 +2,7 @@
 <nav class="navbar navbar-default{% if fixed|default('none') != 'none' %} navbar-fixed-{{ fixed }}{% endif %}{% if inverse %} navbar-inverse{% endif %} {{ attributes['class'] }}"  {% include 'partials/_attributes.html.twig' with {'ignore': ['class']} %}>
   <div class="{% if container %} container{% else %} container-fluid{% endif %}">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#{{ navbar.id }}" aria-expanded="false">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#{{ id }}" aria-expanded="false">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -11,7 +11,7 @@
       <a class="navbar-brand" href="#">{% if brand_image is not null %} {{ grav.page.media[brand_image].resize(20, 20) }} {% else %} {{ brand_text }} {% endif %}</a>
     </div>
 
-    <div class="collapse navbar-collapse">
+    <div class="collapse navbar-collapse" id="{{ id }}">
         {% for item in items %}
             {{ item }}
         {% endfor %}