src/Includes/templates/helper-main-menu.php

@@ -14,12 +14,12 @@ namespace ITSociaal\Themes\Houtgrutter\Includes;
         <div class="expander">&nbsp;</div>
       </div>    <!-- .mainmenu -->
       <?php echo HelperMainMenu::shopmenu(); ?>
-          <!--
-          <li class="cart-subtotal">
-            <img src="<?php echo get_stylesheet_directory_uri(), "/assets/winkelwagen_icon.svg"; ?>" width="32" height="32" alt="Winkelwagen:"/>
-            <?php shopp("cart", "subtotal"); ?>
-          </li>
--->
         </ul>     <!-- #ShopMenu -->
+	<div class="container">
+         <aside id="cart-subtotal">
+            <?php shopp("cart", "subtotal"); ?>
+            <img src="<?php echo get_stylesheet_directory_uri(), "/assets/winkelwagen_icon.svg"; ?>" width="32" height="32" alt="Winkelwagen:"/>
+          </aside>
+	</div>
       </div>    <!-- .shopmenu -->
     </nav>    <!-- .menu -->

style.css

@@ -44,6 +44,7 @@ html.responsive, .responsive body, #wrap_all { overflow-x: visible; }
 #logo {
 	background: #565656;
 	text-align: center;
+	margin-top: 1px;
 }
 
 /* Onderwerpen op homepagina */
@@ -71,16 +72,16 @@ h1,h2,h3,h4,h5,h6, .avia_iconbox_title {
 }
 
 
-html>body#top>div#wrap_all>div#main>:first-child { padding-top: 50px; }
+html>body#top>div#wrap_all>div#main>:first-child { padding-top: 35px; }
 html>body#top.catalog>div#wrap_all>div#main>:first-child { padding-top: 0px; }
-html>body#top.catalog>div#wrap_all>div#main main { padding-top: 50px; }
+html>body#top.catalog>div#wrap_all>div#main main { padding-top: 35px; }
 
 @media only screen and (max-width: 384px) {
 	.responsive #top #wrap_all .container,
 	#main>div>div.container {
 		padding-top: 0;
-		width: 100%;
-		max-width: 100%;
+		width: 98%;
+		max-width: 98%;
 	}
 }
 
@@ -99,9 +100,9 @@ div.shopmenu { background: rgba(87, 37, 117, .95); }
 
 nav.menu a:hover {
 	background: transparent;
-	color: #000;
+	color: #222;
 
-	border-bottom-color: #000;
+	border-bottom-color: #222;
 }
 div.shopmenu a:hover {
 	background: #7D4A9D;
@@ -116,13 +117,14 @@ nav.menu a:focus, nav.menu a:hover {
 nav.menu a {
 	/* text content */
 	font-weight: 600;
+	font-size: 12px;
 	white-space: nowrap;
-  padding: 0px 17px;
+	padding: 0px 13px;
 
 	/* box */
 	display: block;
-	height: 50px;
-	line-height: 46px;
+	height: 35px;
+	line-height: 29px;
 
 	/* special effects */
 	transition: color .4s ease-in-out, border-color .3s ease-out, background-color .3s ease-out;
@@ -152,14 +154,14 @@ nav.menu ul {
 	justify-content: left;
 
 	height: auto;
-	max-height: 50px;
+	max-height: 35px;
 	overflow-y: hidden;
 
 	transition: max-height .5s ease-in;
 }
 
 nav.menu {
-	max-height: 50px;
+	max-height: 35px;
 	overflow-y: visible;
 	position: relative;
 	z-index: 1024;
@@ -174,13 +176,16 @@ nav.menu.open ul {
 	display: block;
 	max-height: 1024px;
 }
+.responsive #top.page-id-0 nav.menu.open + div#main {
+	margin-top: -35px;
+}
 nav.menu div.expander {
 	position: absolute;
 	top: 0;
 	right: 8px;
 
 	width: 32px;
-	height: 50px;
+	height: 35px;
 
 	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcKeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgp2ZXJzaW9uPSIxLjEiCnZpZXdCb3g9IjAgMCAzMS45OTk5OTkgMzEuOTk5OTk4IgpoZWlnaHQ9IjMyIgp3aWR0aD0iMzIiPjxnCnRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMjAuMzYyMikiLz48Zz48cmVjdApyeT0iMS4zMjgxMjQ5Igp5PSIyMS45OTk5OTgiCng9IjMuOTk5OTk5IgpoZWlnaHQ9IjMuOTk5OTk5NSIKd2lkdGg9IjIzLjk5OTk5OCIKc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIvPjxyZWN0CnJ5PSIxLjMyODEyNDkiCnk9IjUuOTk5OTk4NiIKeD0iNCIKaGVpZ2h0PSIzLjk5OTk5OTUiCndpZHRoPSIyMy45OTk5OTYiCnN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjEiIC8+PHJlY3QKcnk9IjEuMzI4MTI0OSIKeT0iMTMuOTk5OTk5Igp4PSI0IgpoZWlnaHQ9IjMuOTk5OTk5NSIKd2lkdGg9IjIzLjk5OTk5NiIKc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L2c+PC9zdmc+Cg==") center center no-repeat;
 }
@@ -199,7 +204,7 @@ div.shopmenu {
 
 /* Search box */
 .html_bottom_nav_header #top #MainMenu #menu-item-search > a {
-	padding-right: 17px;
+	padding-right: 13px;
 }
 #MainMenu .avia-search-tooltip {
 	box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.8)
@@ -214,29 +219,7 @@ div.shopmenu {
 
 
 
-/*
-nav.menu li.cart-subtotal>img {
-	display: block;
-	position: absolute;
-	top: 50%;
-	margin-top: -16px;
-	margin-left: -38px;
-}
-
-
-nav.menu,div.mainmenu,div.shopmenu {
-	height: 50px;
-	transition: opacity ease-out .2s;
-	opacity: 1;
-	width: 100%;
-	text-align: center;
-}
 
-#MainMenu a, #ShopMenu a {
-	padding: 0px 17px;
-	white-space: nowrap;
-}
-*/
 
 body.page-id-0 div.shopmenu,
 body.shopp-collection div.shopmenu,
@@ -248,7 +231,7 @@ body.shopp-product div.shopmenu {
 body.page-id-0 #main,
 body.shopp-collection #main,
 body.shopp-product #main {
-	margin-top: 50px;
+	margin-top: 35px;
 }
 body.page-id-0 div.hidez,
 body.shopp-collection div.hidez,
@@ -259,19 +242,6 @@ div.hidez {
 	opacity: 0;
 }
 
-@media only screen and (min-width: 672px) {
-	nav.menu div.expander {
-		display: none;
-	}
-	nav.menu.open ul {
-		display: -webkit-flex;
-		display: -ms-flex;
-		display: flex;
-	}
-	ul#MainMenu.menu {
-		padding-right: 0px;
-	}
-}
 @media only screen and (min-width: 768px) {
 	nav.menu {
 		overflow-y: visible/
@@ -291,6 +261,45 @@ div.hidez {
 		justify-content: left;
 	}
 }
+@media only screen and (min-width: 768px) and (max-width: 783px) {
+	body#top nav.menu>div.shopmenu>div.container {
+		padding: 0;
+	}
+}
+@media only screen and (min-width: 784px) {
+	nav.menu div.expander {
+		display: none;
+	}
+	nav.menu.open ul {
+		display: -webkit-flex;
+		display: -ms-flex;
+		display: flex;
+	}
+	ul#MainMenu.menu {
+		padding-right: 0px;
+	}
+}
+@media only screen and (min-width: 900px) {
+	nav.menu li.cart-subtotal {
+		display: inline;
+		margin-left: auto;
+	}
+	nav.menu li.cart-subtotal>span.cart-subtotal {
+		display: block;
+		height: 35px;
+		line-height: 46px;
+		font-weight: 600;
+		border-top: 2px solid transparent;
+		border-bottom: 2px solid transparent;
+	}
+	nav.menu li.cart-subtotal>img {
+		display: block;
+		position: absolute;
+		top: 50%;
+		margin-top: -16px;
+		margin-left: -38px;
+	}
+}
 
 /* Hamburger menu search box */
 nav.menu.open div.mainmenu  li div.avia-search-tooltip {
@@ -478,7 +487,7 @@ body.page-id-0 #main { overflow-x: scroll; }
 		min-height: 320px;
 	}
 	#main .advertentie-content-wrap {
-		top: 50px;
+		top: 35px;
 		right: 0px;
 		bottom: 0px;
 		left: 0px;
@@ -494,4 +503,43 @@ body.page-id-0 #main { overflow-x: scroll; }
 	}
 }
 
+
+
+/* CART ICON THINGY */
+div.shopmenu>div.container {
+	text-align: right;
+	position: absolute;
+}
+aside#cart-subtotal {
+	display: inline-block;
+	position: relative;
+	top: -35px;
+	padding-right: 8px;
+}
+.open aside#cart-subtotal {
+	display: none;
+}
+aside#cart-subtotal>span {
+	display: block;
+	float: left;
+	height: 35px;
+	padding-right: 6.5px;
+
+	font-weight: 600;
+	line-height: 29px;
+
+	border-top: 2px solid transparent;
+	border-bottom: 2px solid transparent;
+}
+aside#cart-subtotal>img {
+	position: relative;
+	top: 2px;
+}
+.open #cart-subtotal {
+  display: none;
+}
+.responsive #top #wrap_all #ShopMenu {
+  padding-right: 128px;
+}
+
 /* vi:set ts=2 sw=2 noet: */