edit css responsive

themes/contrib/estore/css/styles.css

@@ -21,6 +21,13 @@ body {
 }
 
 /* invi custom */
+.middle-header-wrapper{
+	background-color: #f8ebbc !important;
+}
+.bottom-nav{
+	background-color: #f8ebbc !important;
+	padding-bottom: 16px;
+}
 .menu--main .open ul.sidebar-submenu-2 li:hover {
 	background: white !important;
 }
@@ -103,7 +110,7 @@ body {
 }
 .menu--category-menu .open ul.sidebar-submenu-2 li {
 	border-bottom: none !important;
-	width: 170px !important
+	width: 251px !important;
 }
 .menu--category-menu .open ul.sidebar-submenu-2.three-level{
 	flex-direction: row !important;
@@ -111,7 +118,7 @@ body {
 
 .menu--category-menu .open ul.sidebar-submenu-2 li  a{
 	white-space: normal;
-	padding: 0 5px;
+	padding: 0 5px !important;
 }
 .menu--category-menu .open ul.sidebar-submenu-2 {
 	padding: 10px 5px 20px !important;
@@ -137,8 +144,21 @@ body {
 .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 {
+  padding: 4px 0;
+  width: 100% !important;
+}
+header.navbar .category-menu ul.menu ul.dropdown-menu li span {
+	font-weight: 500;
+    color: black;
+    font-size: 15px;
+    letter-spacing: 0.5px;
+    margin-bottom: 0;
+    margin-top: 0;
+}
 .menu--category-menu .open .dropdown-menu.three-level .sidebar-submenu-3 li a{
   font-weight: normal !important;
+  padding: 0;
 }
 .menu--category-menu .open .dropdown-menu li a{
   font-weight: normal;
@@ -189,7 +209,7 @@ border-radius: 9px;
 header.navbar .category-menu ul.menu ul.dropdown-menu li{
   /* border: none; */
   font-weight: 200 !important;
-  padding: 5px 0px;
+  padding: 5px 11px;
 }
 
 .pin_be .navbar-nav>li.open>.dropdown-menu {
@@ -216,12 +236,12 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li{
 }
 .middle-header-wrapper .container-fluid.fixed-top {
   position: fixed;
-  z-index: 200000;
+  z-index: 2000;
   top: 76px;
   left: 0;
   right: 0;
   width: 100%;
-  background: rgba(255, 255, 255, 0.95);
+  /* background: rgba(255, 255, 255, 0.95); */
 }
 
 header.navbar .category-menu ul.menu.litte-menu {
@@ -384,7 +404,7 @@ border: 1.5px solid red;
 .middle-header-wrapper .container-fluid {
   display: flex;
   align-items: center;
-  background: white;
+  background: #f8ebbc;
 }
 
 @keyframes mymove {
@@ -420,7 +440,7 @@ header .link_content:hover {
   background: #f09d51;
 }
 header .link_content {
-  background: #e94537;
+  background: #ee964a;
   height: 57px;
   color: white;
   color: #fff !important;
@@ -448,28 +468,40 @@ header .link_content a:hover {
   border: 1px solid #e94337;
   border-radius: 4px;
   padding: 5px 20px;
-  background: #ff000026;
+  background: #EE964B;
+  color: white !important;
 }
 
 .pin_be {
   display: flex;
   align-items: center;
+  background: #f8ebbc;
 }
 
 .cong {
   border-top: 1px solid #e94337;
   border-bottom: 1px solid #e94337;
   border-left: 1px solid #e94337;
-  height: 26px;
+  height: 29px;
+  line-height: 25px;
   width: 10px;
+  background: #ee964a;
+  color: white;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
 }
 
 .tru {
   border-top: 1px solid #e94337;
   border-bottom: 1px solid #e94337;
   border-right: 1px solid #e94337;
-  height: 26px;
+  height: 28px;
   width: 10px;
+  color: white;
+  background: #ee964a;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+  line-height: 25px;
 }
 
 html {
@@ -481,18 +513,22 @@ header.navbar .block-search-navigation {
   /* flex: 1; */
   /* padding: 0 25px; */
 }
-
+#toolbar-administration, #toolbar-administration * {
+	z-index: 99999;
+}
 .search .input-group {
   /* padding-left: 30px; */
   position: relative;
   width: 100%;
   /* max-width: 650px; */
-  border: 2px solid #ebebeb;
+  border: 2px solid #e94537;
   /* border-right: 2px solid #ebebeb; */
   /* border-bottom: 2px solid #ebebeb; */
   border-radius: 0 5px 5px 0;
 }
-
+.search .input-group input::placeholder {
+	color: #333;
+}
 .search .input-group button {
   font-size: 12px;
   text-transform: uppercase;
@@ -516,7 +552,7 @@ header.navbar .block-search-navigation {
   background: inherit;
   width: 100%;
   height: 50px;
-  color: #222222;
+  color: #333;
   font-size: 14px;
   font-weight: 400;
   padding: 0 145px 0 20px;
@@ -572,14 +608,7 @@ header.navbar .block-search-navigation {
     line-height: 16px;
   }
 
-  div.pin_be {
-    position: absolute !important;
-    right: -41px !important;
-    top: 9px !important;
-    /* margin-left: 20px !important; */
-    width: 35px;
-    height: 35px;
-  }
+
 
   header.navbar .main-menu .toggle-wrap .toggle {
     font-size: 20px !important;
@@ -620,9 +649,173 @@ header.navbar .block-search-navigation .search-icon {
     justify-content: flex-end !important;
   }
 }
-
+.btn-mobile-top{
+	display: none;
+}
+.mobile-top{
+	display: none;
+}
 /* invi 991 response */
 @media (max-width: 991px) {
+	header.navbar .category-menu ul.menu.litte-menu{
+		display: none !important;
+	}
+	.region-middle-bottom-header .search-block-form{
+		display: none !important;
+	}
+	.region-middle-header .pin_be{
+		display: none !important;
+	}
+	.btn-mobile-top{
+		display: block !important;
+		background: #eb5335;
+		border: none;
+		width: 30px;
+		height: 30px;
+		color: white;
+		/* padding-top: 10px; */
+		border-radius: 4px;
+		position: absolute;
+		top: 10px;
+	}
+	.mobile-top {
+    display: flex !important;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 300px;
+    position: absolute;
+    top: 0;
+    left: -300px;
+    z-index: 999999;
+    height: 100vh;
+    background: #f8ebbc;
+		color: black;
+	    font-weight: 500;
+	    font-size: 14px;
+			padding:  0 20px;
+	    transition: 0.5s ease-in-out;
+			box-shadow: 0 3px 9px rgba(0,0,0,.5);
+}
+.mobile-top.menu-toggle{
+	left: 0px;
+}
+.mobile-top .address-mobile{
+	padding: 41px 0px 20px;
+}
+.mobile-top .address-mobile div{
+	padding: 5px 0 ;
+	font-size: 15px;
+	font-weight: 500;
+}
+.mobile-top .pin_be{
+	position: relative !important;
+}
+.close-icon{
+	border: 1.5px solid black;
+	display: flex;
+	align-items: center;
+	width: 25px;
+	height: 25px;
+	font-size: 15px;
+	font-weight: 200;
+	border-radius: 6px;
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	justify-content: center;
+}
+.mobile-modal{
+	background: black;
+	opacity: 0.8;
+	top: 0;
+	left: 0;
+	position: fixed;
+	z-index: 99998;
+	width: 100%;
+	height: 100%;
+	/* justify-content: center; */
+}
+.mobile-top .input-group{
+	position: relative;
+    width: 100%;
+    margin-top: 14px;
+    /* border-top: 2px solid black; */
+    /* border-right: 2px solid black; */
+    /* border-bottom: 2px solid #ebebeb; */
+    margin-bottom: 25px;
+    /* border-left: 2px solid #ebebeb; */
+    border-radius: 10px;
+}
+.btn-primary:hover{
+	background: #e94537 !important;
+}
+.btn-primary{
+	border-color: #e94537 !important;
+
+}
+.mobile-top .input-group input{
+	font-size: 12px;
+    padding: 0 92px 0 10px;
+    width: 100%;
+    height: 34px;
+    border: 0;
+    background: white;
+    /* width: 100%; */
+    /* height: 50px; */
+    color: #222222;
+    /* font-size: 14px; */
+    font-weight: 400;
+    /* padding: 0 145px 0 20px; */
+    opacity: 0.7;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+.mobile-top .input-group button{
+	border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    width: 60px;
+}
+
+.region-mobile-top{
+	width : 100% ;
+}
+.region-mobile-top .toggle-wrap {
+	display: none !important;
+}
+.region-mobile-top .tru {
+	display: none !important;
+}
+.region-mobile-top .cong {
+	display: none !important;
+}
+.region-mobile-top .navbar-nav{
+	margin-left: 0
+}
+.region-mobile-top .pin{
+	width: 100%;
+    background: none;
+    border: none;
+    color: black !important;
+}
+.region-mobile-top .pin a{
+	color: black;
+    font-weight: 500;
+    font-size: 14px;
+		text-transform: uppercase;
+}
+	header.navbar .category-menu ul.menu.hide-block{
+		display: block !important;
+	}
+	header.navbar .category-menu ul.menu.not-home{
+		display: block !important;
+	}
+	header.navbar .category-menu ul.menu.hide-block.not-home{
+		display: none !important
+	}
+	header.navbar .category-menu ul.menu{
+		display: none !important;
+	}
   .search .input-group button {
     min-width: 20px !important;
   }
@@ -790,29 +983,8 @@ header.navbar .block-search-navigation .search-icon {
     /* flex-direction: column; */
   }
 
-  .pin_be {
-    float: right;
-    padding: auto;
-    /* left: 30px; */
-    border: 1px solid #e2e2e2;
-    right: -50px !important;
-    position: absolute;
-  }
-
-  .pin_be div {
-    border: none;
-    /* border: 1px solid #e2e2e2; */
-    /* display: none; */
-    /* padding-left: 22px; */
-  }
 
-  .pin_be .cong {
-    display: none
-  }
 
-  .pin_be .tru {
-    display: none
-  }
 
   header.navbar .main-menu {
     margin-right: 10px;
@@ -4175,7 +4347,7 @@ output {
   border-color: #66afe9;
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  /* box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); */
 }
 
 .form-control::-moz-placeholder {
@@ -5741,6 +5913,9 @@ tbody.collapse.in {
 
 .input-group .form-control:focus {
   z-index: 3;
+  outline: none;
+  border: none;
+  box-shadow: none;
 }
 
 .input-group-addon,
@@ -9960,12 +10135,13 @@ body.toolbar-loading.toolbar {
   float: left;
   margin-top: 12px;
   line-height: 12px;
+  /* font-size: 45px; */
 }
 
 .top-header-wrapper .left-top-header>div {
   display: inline-block;
   margin: 0 5px;
-  font-size: 13px;
+  font-size: 14px;
   /* font-weight: 600; */
 }
 
@@ -9974,6 +10150,9 @@ body.toolbar-loading.toolbar {
 }
 
 @media (max-width: 991px) {
+	.top-header-wrapper{
+		display: none !important;
+	}
   .top-header-wrapper .left-top-header {
     float: none;
     text-align: center;
@@ -10009,7 +10188,7 @@ body.toolbar-loading.toolbar {
 
 .top-header-wrapper .right-top-header ul.menu a:hover {
   color: #fff;
-  background-color: #380801;
+  background-color: #ee964a;
 }
 
 @media (max-width: 991px) {
@@ -10066,6 +10245,8 @@ body.toolbar-loading.toolbar {
 .middle-header-wrapper .region-left-middle-header .branding-block .site-title {
   float: left;
   padding-top: 5px;
+  display: flex;
+  align-items: center;
 }
 
 .middle-header-wrapper .region-left-middle-header .branding-block .site-title .name {
@@ -10073,7 +10254,7 @@ body.toolbar-loading.toolbar {
   color: #454545;
   font-size: 28px;
   font-weight: bold;
-  line-height: 1.3;
+  /* line-height: 1.3; */
   white-space: nowrap;
 }
 
@@ -10289,7 +10470,7 @@ header.navbar .category-menu .block-title i {
 
 header.navbar .category-menu .block-title.active,
 header.navbar .category-menu .block-title:hover {
-  background-color: #e94337;
+  background-color: #F95738;
 }
 
 @media (max-width: 991px) {
@@ -10304,7 +10485,7 @@ header.navbar .category-menu .block-title:hover {
 header.navbar .category-menu ul.menu {
   position: absolute;
   z-index: 999;
-  top: 100px;
+  top: 114px;
   left: 0;
   display: block;
   width: 100%;
@@ -10402,7 +10583,7 @@ header.navbar .main-menu ul.menu li a {
   display: block;
   padding: 0;
   text-transform: uppercase;
-  color: #333;
+  color: white;
   text-align: right;
   line-height: inherit;
   white-space: nowrap;
@@ -10658,7 +10839,7 @@ header.navbar .block-search-navigation .search-icon.active {
 
 .footer {
   padding: 50px 0 0 0;
-  background-color: #fbe3ce;
+  background-color: #f8ebbc;
 }
 
 .footer .block .block-title {

themes/contrib/estore/estore.info.yml

@@ -12,6 +12,7 @@ libraries:
 
 # Regions.
 regions:
+  mobile_top : 'Mobile top'
   top_header_right: 'Top Header Right'
   left_middle_header: 'Left Middle Header'
   middle_header: 'Middle Header'

themes/contrib/estore/js/custom.js

@@ -37,6 +37,8 @@
   }
   if (checkHome.length == 0) {
     $(".menu.menu--category-menu.nav").addClass('hide-block');
+    $(".menu.menu--category-menu.nav").addClass('not-home');
+
   }
   $(window).scroll(function () {
     // console.log($(window).scrollTop() )
@@ -72,8 +74,20 @@
   $(".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");
+ $(".mobile-modal").hide();
 
+ $(".btn-mobile-top").click(function(){
+   $(".mobile-modal").show();
+   $(".mobile-top").addClass("menu-toggle");
+ })
+ $(".mobile-modal").click(function(){
+   $(".mobile-modal").hide();
+   $(".mobile-top").removeClass("menu-toggle");
 
+ })
+ $(".close-icon").click(function(){
+   $(".mobile-top").removeClass("menu-toggle");
+   $(".mobile-modal").hide();
+ })
 })(window.jQuery, window.Drupal);

themes/contrib/estore/templates/block/block--system-branding-block.html.twig

@@ -19,7 +19,7 @@
   <div class="branding-block clearfix">
     {% if site_logo %}
       <a class="logo navbar-btn pull-left" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
-        <img class="logo_img"  src="/themes/contrib/estore/logo.png" alt="{{ 'Home'|t }}" />
+        <img class="logo_img"  src="/themes/contrib/estore/logo.svg" alt="{{ 'Home'|t }}" />
       </a>
     {% endif %}
 

themes/contrib/estore/templates/layouts/homepage/first/homepage--first.html.twig

@@ -12,7 +12,7 @@
  */
 #}
 {% if content %}
-  <div{{ attributes .addClass('estore-homepage-first')}}>
+  <div{{ attributes.addClass('estore-homepage-first')}}>
 
     {% if content.top_slideshow or content.top_categories %}
     <div class="top-region">

themes/contrib/estore/templates/system/page.html.twig

@@ -62,6 +62,40 @@
         theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class,
       ]
     %}
+    <div class="mobile-top">
+      <div class="close-icon">
+        <i class="fa fa-times" aria-hidden="true"></i>
+      </div>
+      <div class="address-mobile">
+        {% if top_header.header_email %}
+          <div class="site-email">
+            <i class="fa fa-envelope"></i>
+            {{ top_header.header_email }}
+          </div>
+        {% endif %}
+        {% if top_header.header_phone %}
+          <div class="site-phone">
+            <i class="fa fa-phone"></i>
+            {{ top_header.header_phone }}
+          </div>
+        {% endif %}
+        {% if top_header.header_location %}
+          <div class="site-map-marker">
+            <i class="fa fa-map-marker"></i>
+            {{ top_header.header_location }}
+          </div>
+        {% endif %}
+        {% if top_header.header_shop_opens %}
+          <div class="site-clock-o">
+            <i class="fa fa-clock-o"></i>
+            {{ top_header.header_shop_opens }}
+          </div>
+        {% endif %}
+      </div>
+      {% if page.mobile_top %}
+          {{ page.mobile_top }}
+      {% endif %}
+    </div>
     <div class="top-header-wrapper clearfix">
       <div class="container-fluid">
         <div class="left-top-header">
@@ -97,7 +131,9 @@
         </div>
       </div>
     </div>
+    <div class="mobile-modal">
 
+    </div>
     <div class="middle-header-wrapper clearfix">
       <div class="container-fluid">
         <div class="col-md-3 col-xs-7">
@@ -115,18 +151,22 @@
             </div>
 
           </header>
+          <button type="button" name="button" class="btn-mobile-top">
+            <i class="fa fa-bars" aria-hidden="true"></i>
+          </button>
         </div>
 
             <div class="col-md-2 col-xs-3">
               {% if page.right_middle_header %}
                 {{ page.right_middle_header }}
               {% endif %}
+
             </div>
 
           </div>
         </div>
 
-        <header{{ navbar_attributes.addclass(navbar_classes) }} id="navbar" role="banner">
+        <header{{ navbar_attributes.addclass(navbar_classes, 'bottom-nav') }} id="navbar" role="banner">
           {% if not navbar_attributes.hasClass(container) %}
             <div class="{{ container }}">
             {% endif %}