added responsive rich menu and small fix in blockbanner

themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

@@ -2,6 +2,19 @@
 /*** ESSENTIAL STYLES ***/
 .sf-contener {
   clear: both;
+  float: left;
+  width: 100%;
+  margin: 50px 0 0;
+}
+@media (min-width: 480px) and (max-width: 767px) {
+  .sf-contener {
+    margin-top: 80px;
+  }
+}
+@media (max-width: 479px) {
+  .sf-contener {
+    margin-top: 70px;
+  }
 }
 
 .sf-menu, .sf-menu * {
@@ -11,30 +24,28 @@
 }
 
 .sf-menu {
-  margin: 50px 0 0;
+  position: relative;
   padding: 0;
   width: 100%;
   border-bottom: 3px solid #e9e9e9;
   background: #f6f6f6;
 }
-@media (min-width: 480px) and (max-width: 767px) {
+@media (max-width: 767px) {
   .sf-menu {
-    margin-top: 80px;
-  }
-}
-@media (max-width: 479px) {
-  .sf-menu {
-    margin-top: 70px;
+    display: none;
   }
 }
 
 .sf-menu ul {
   position: absolute;
   top: -999em;
-  width: 10em;
-  /* left offset of submenus need to match (see below) */
   background: white;
 }
+@media (max-width: 767px) {
+  .sf-menu ul {
+    position: relative;
+  }
+}
 
 .sf-menu ul li {
   width: 100%;
@@ -45,15 +56,32 @@
   /* fixes IE7 'sticky bug' */
 }
 
-.sf-menu li {
-  position: relative;
-}
-
 .sf-menu > li {
   float: left;
   border-right: 1px solid #d6d4d4;
   margin-bottom: -3px;
 }
+@media (max-width: 767px) {
+  .sf-menu > li {
+    float: none;
+    position: relative;
+    border-right: none;
+  }
+  .sf-menu > li span {
+    position: absolute;
+    right: 6px;
+    top: 20px;
+    display: none;
+    width: 30px;
+    height: 30px;
+    z-index: 2;
+  }
+  .sf-menu > li span:after {
+    font-family: "FontAwesome";
+    content: "";
+    font-size: 26px;
+  }
+}
 .sf-menu > li > a {
   font: 600 18px/22px "Open Sans", sans-serif;
   text-transform: uppercase;
@@ -62,14 +90,25 @@
   padding: 17px 20px;
   border-bottom: 3px solid #e9e9e9;
 }
+@media (max-width: 767px) {
+  .sf-menu > li > a.sf-with-ul:after {
+    position: absolute;
+    right: 15px;
+    top: 18px;
+    font-family: "FontAwesome";
+    content: "";
+    font-size: 26px;
+    z-index: 1;
+  }
+}
 .sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
   background: #333333;
   border-bottom-color: #666666;
   color: white;
 }
 
-.sf-menu li li a {
-  display: block;
+.sf-menu li li li a {
+  display: inline-block;
   position: relative;
   color: #777777;
   font-size: 13px;
@@ -77,13 +116,13 @@
   font-weight: bold;
   padding-bottom: 10px;
 }
-.sf-menu li li a:before {
+.sf-menu li li li a:before {
   content: "";
   display: inline-block;
   font-family: "FontAwesome";
   padding-right: 10px;
 }
-.sf-menu li li a:hover {
+.sf-menu li li li a:hover {
   color: #333333;
 }
 
@@ -93,12 +132,34 @@
   top: 59px;
   /* match top ul list item height */
   z-index: 99;
-  width: 220px;
-  padding: 25px 30px;
+  padding: 12px 0px 18px 0px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
 }
+@media (max-width: 767px) {
+  .sf-menu li ul {
+    top: 0;
+  }
+}
+
+.sf-menu li li ul {
+  position: static;
+  display: block !important;
+  opacity: 1 !important;
+  background: none;
+  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
+  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
+  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
+}
+
+.sf-menu li li li ul {
+  padding: 0 0 0 20px;
+}
+
+.sf-menu li li li ul {
+  width: 220px;
+}
 
 ul.sf-menu li:hover li ul,
 ul.sf-menu li.sfHover li ul {
@@ -123,3 +184,113 @@ ul.sf-menu li li li.sfHover ul {
   /* match ul width */
   top: 0;
 }
+
+.sf-menu > li > ul {
+  padding: 26px 30px 31px;
+  width: 100%;
+}
+.sf-menu > li > ul > li > a {
+  text-transform: uppercase;
+  font: 600 16px/20px "Open Sans", sans-serif;
+  color: #333333;
+}
+.sf-menu > li > ul > li > a:hover {
+  color: #515151;
+}
+
+.sf-menu > li > ul > li:not(#category-thumbnail) {
+  float: left;
+  width: 20%;
+  padding-right: 15px;
+}
+@media (max-width: 767px) {
+  .sf-menu > li > ul > li:not(#category-thumbnail) {
+    width: 50%;
+  }
+}
+@media (max-width: 479px) {
+  .sf-menu > li > ul > li:not(#category-thumbnail) {
+    width: 100%;
+  }
+}
+@media (min-width: 768px) {
+  .sf-menu > li > ul > li:not(#category-thumbnail).first-in-line-lg {
+    clear: left;
+  }
+}
+@media (min-width: 480px) and (max-width: 767px) {
+  .sf-menu > li > ul > li:not(#category-thumbnail).first-in-line-xs {
+    clear: left;
+  }
+}
+
+.sf-menu > li > ul > li#category-thumbnail {
+  width: 100%;
+  clear: both;
+  overflow: hidden;
+}
+.sf-menu > li > ul > li#category-thumbnail > div {
+  float: left;
+  padding-left: 10px;
+  width: 33.333%;
+}
+@media (max-width: 479px) {
+  .sf-menu > li > ul > li#category-thumbnail > div {
+    width: 100%;
+    padding-left: 0;
+    padding-top: 10px;
+    text-align: center;
+  }
+}
+.sf-menu > li > ul > li#category-thumbnail > div:first-child {
+  padding-left: 0;
+}
+.sf-menu > li > ul > li#category-thumbnail > div img {
+  max-width: 100%;
+  width: 100%;
+  display: block;
+}
+
+.cat-title {
+  display: none;
+}
+@media (max-width: 767px) {
+  .cat-title {
+    display: block;
+    font: 600 18px/22px "Open Sans", sans-serif;
+    text-transform: uppercase;
+    color: #484848;
+    display: block;
+    padding: 17px 20px;
+    border-bottom: 3px solid #e9e9e9;
+    background: #f6f6f6;
+    position: relative;
+  }
+  .cat-title:hover {
+    background: #333333;
+    border-bottom-color: #666666;
+    color: white;
+  }
+  .cat-title:after {
+    display: block;
+    font-family: "FontAwesome";
+    content: "";
+    position: absolute;
+    right: 15px;
+    top: 18px;
+    font-size: 26px;
+  }
+  .cat-title.active:after {
+    content: "";
+  }
+}
+
+@media (max-width: 767px) {
+  .sf-menu > li.sfHover > a.sf-with-ul:after, .sf-menu > li.sfHoverForce > a.sf-with-ul:after {
+    display: none;
+  }
+
+  .sf-menu > li.sfHover > span, .sf-menu > li.sfHoverForce > span {
+    display: block;
+  }
+}