edit css

themes/contrib/bootstrap/templates/menu/menu.html.twig

@@ -21,11 +21,17 @@
 #}
 {% macro menu_links(items, attributes, menu_level, classes, dropdown_classes) %}
   {% if items %}
-    <ul{{ attributes.addClass(menu_level == 0 ? classes : dropdown_classes) }}>
+    {% set menu_classes = ['sidebar' ~ menu_name | clean_class] %}
+    {%  set submenu_classes = ['sidebar' ~ menu_name|clean_class ~ '-submenu','sidebar-submenu-' ~ (menu_level + 1),]%}
+    {% if menu_level == 0 %}
+      <ul {{ attributes.addClass( classes  ) }}>
+      {% else %}
+
+        <ul{{ attributes.removeClass(menu_classes, 'sidebar-submenu-' ~ (menu_level)).addClass(submenu_classes , "dropdown-menu") }}>
+
+        {% endif %}
         {% for item in items %}
-      {%
-        set item_classes = item.url.getOption('container_attributes').class | split(" ")
-      %}
+          {% set item_classes = item.url.getOption('container_attributes').class | split(" ") %}
           {%
         set item_classes = [
           item.is_expanded and item.below ? 'expanded dropdown',
@@ -38,7 +44,8 @@
             {% set link_title = item.title %}
             {% set link_attributes = item.link_attributes %}
             {% if menu_level == 0 and item.is_expanded and item.below %}
-          {% set link_title %}{{ link_title }}<i class="fa fa-chevron-right" aria-hidden="true"></i>{% endset %}
+              {% set link_title %}{{ link_title }}
+              <i class="fa fa-chevron-right" aria-hidden="true"></i>{% endset %}
               {% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}
             {% endif %}
             {# Must use link() here so it triggers hook_link_alter(). #}
@@ -50,11 +57,11 @@
         {% endfor %}
       </ul>
     {% endif %}
-{% endmacro %}
+  {% endmacro %}
 
-{#
+  {#
   Invoke the custom macro defined above. If classes were provided, use them.
   This allows the template to be extended without having to also duplicate the
   code above. @see http://twig.sensiolabs.org/doc/tags/macro.html
 #}
-{{ _self.menu_links(items, attributes, 0, classes ?: ['menu', 'menu--' ~ menu_name|clean_class, 'nav'], dropdown_classes ?: ['dropdown-menu']) }}
+  {{ _self.menu_links(items, attributes, 0, classes ?: ['menu', 'menu--' ~ menu_name|clean_class, 'nav'], dropdown_classes ?: ['dropdown-menu']) }}

themes/contrib/estore/css/styles.css

@@ -21,24 +21,105 @@ body {
 }
 
 /* invi custom */
-.region-footer-fourth .view-content{
+.menu--main .open ul.sidebar-submenu-2 li:hover {
+	background: white !important;
+}
+.menu--main .open ul.sidebar-submenu-2 li {
+	border-bottom: none !important;
+	width: 170px !important
+}
+.menu--main .open ul.sidebar-submenu-2.three-level{
+	flex-direction: row !important;
+}
+
+.menu--main .open ul.sidebar-submenu-2 li  a{
+	white-space: normal;
+	padding: 0 5px;
+	line-height: normal !important;
+	text-align: left !important;
+	text-transform: none !important;
+}
+.menu--main .open ul.sidebar-submenu-2 {
+	padding: 26px  20px !important;
+}
+.menu--main .open ul.sidebar-submenu-2.sidebar-submenu-3 li{
+	padding: 7px 0
+}
+/* .menu--main .open ul.sidebar-submenu-2 ul.slidebar-submenu-3 {
 	display: flex;
+	flex-direction: column !important;
+} */
+.menu--main  .open .dropdown-menu { /* menu lv2 */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    top: 98%;
+    left: -2px;
+    /* width: 73%; */
+    /* text-align: center; */
+    background: white !important;
+    /* height: 169%; */
 }
-.contact_text{
-  margin-top: 12px
+.menu--main .open .dropdown-menu li {
+  width: 100%;
 }
-.region-footer-fourth .view-content .img-responsive {
-  width: 35px;
-height: 35px;
-margin-right: 7px;
-margin-top: 14px;
-border-radius: 9px;
+.menu--main .open .dropdown-menu.three-level li a{
+  font-weight: 600 !important;
 }
-header.navbar .category-menu ul.menu ul.dropdown-menu li{
-  /* border: none; */
-  font-weight: 200 !important;
-  padding: 5px 0px;
+.menu--main .open .dropdown-menu.three-level .sidebar-submenu-3 li a{
+  font-weight: normal !important;
+  padding: 6px 0;
+}
+.menu--main .open .dropdown-menu li a{
+  font-weight: normal;
+}
+.menu--main .open .dropdown-menu .dropdown-menu.sidebar-submenu-3{
+	margin-top: 10px
+}
+.menu--main  .open .dropdown-menu  .dropdown-menu{/* menulv 3 */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    top: 5px;
+    /* height: 102%; */
+    border: none;
+    left: 0;
+    position: relative;
+}
+.menu--main  .open .dropdown-menu  .dropdown-menu li{/* menulv 3 */
+  /* padding: 5px 10px; */
+  font-weight: 200;
+}
+.menu--main  .open .dropdown-menu  .dropdown-menu li a{/* menulv 3 */
+      font-weight: 500;
+}
+.menu--main  .open .dropdown-menu li {
+  color : red
+
+}
+/* end custom */
+.menu--category-menu .open ul.sidebar-submenu-2 li:hover {
+	background: white !important;
 }
+.menu--category-menu .open ul.sidebar-submenu-2 li {
+	border-bottom: none !important;
+	width: 170px !important
+}
+.menu--category-menu .open ul.sidebar-submenu-2.three-level{
+	flex-direction: row !important;
+}
+
+.menu--category-menu .open ul.sidebar-submenu-2 li  a{
+	white-space: normal;
+	padding: 0 5px;
+}
+.menu--category-menu .open ul.sidebar-submenu-2 {
+	padding: 10px 5px 20px !important;
+}
+/* .menu--category-menu .open ul.sidebar-submenu-2 ul.slidebar-submenu-3 {
+	display: flex;
+	flex-direction: column !important;
+} */
 .menu--category-menu  .open .dropdown-menu { /* menu lv2 */
     display: flex;
     flex-direction: column;
@@ -53,9 +134,14 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
 .menu--category-menu .open .dropdown-menu li {
   width: 100%;
 }
+.menu--category-menu .open .dropdown-menu.three-level li a{
+  font-weight: 600 !important;
+}
+.menu--category-menu .open .dropdown-menu.three-level .sidebar-submenu-3 li a{
+  font-weight: normal !important;
+}
 .menu--category-menu .open .dropdown-menu li a{
-  font-weight: 600;
-
+  font-weight: normal;
 }
 .menu--category-menu  .open .dropdown-menu  .dropdown-menu{/* menulv 3 */
     display: flex;
@@ -79,6 +165,33 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
   color : red
 
 }
+
+.menu--category-menu .dropdown-toggle i{
+  font-size: 14px;
+  font-weight: 300;
+  top: 15px;
+  position: absolute;
+  right: 15px;
+}
+.region-footer-fourth .view-content{
+  display: flex;
+}
+.contact_text{
+  margin-top: 12px
+}
+.region-footer-fourth .view-content .img-responsive {
+  width: 35px;
+height: 35px;
+margin-right: 7px;
+margin-top: 14px;
+border-radius: 9px;
+}
+header.navbar .category-menu ul.menu ul.dropdown-menu li{
+  /* border: none; */
+  font-weight: 200 !important;
+  padding: 5px 0px;
+}
+
 .pin_be .navbar-nav>li.open>.dropdown-menu {
   display: flex;
     flex-direction: column;
@@ -89,13 +202,7 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
 .pin_be .navbar-nav>li>.dropdown-menu li {
   margin-left: 0 !important
 }
-header.navbar .main-menu ul.menu li.open ul a{
-  font-weight: 400;
-    display: block;
-    line-height: 32px;
-    text-transform: capitalize;
-    font-size: 13px;
-}
+
 .middle-header-wrapper .container-fluid.fixed-top.no-toolbar {
   top: 0
 }
@@ -169,15 +276,7 @@ header.navbar .category-menu ul.menu.litte-menu {
     }
 }
 
-.menu--category-menu .dropdown-toggle i{
-  font-size: 14px;
-  font-weight: 300;
-  /* color: blue; */
-  /* float: right; */
-  top: 15px;
-  position: absolute;
-  right: 15px;
-}
+
 /* .top-region{
   background: white;
 }
@@ -10304,8 +10403,8 @@ header.navbar .main-menu ul.menu li a {
   padding: 0;
   text-transform: uppercase;
   color: #333;
-  line-height: inherit;
   text-align: right;
+  line-height: inherit;
   white-space: nowrap;
 }
 header.navbar .main-menu ul.menu li a i{

themes/contrib/estore/js/custom.js

@@ -72,5 +72,8 @@
   $(".dropdown-toggle").mouseleave(function(){
     $(this).parent("li.expanded.dropdown").removeClass("open");
   })
+  console.log($(".sidebar-submenu-2").find(".sidebar-submenu-3").parents(".sidebar-submenu-2"));
+ $(".sidebar-submenu-2").find(".sidebar-submenu-3").parents(".sidebar-submenu-2").addClass("three-level");
+
 
 })(window.jQuery, window.Drupal);