assets/avia.js

@@ -4,6 +4,10 @@
 
     $(document).ready(function()
     {
+	$(".expander").on("click", function() {
+		$(this).closest("nav").toggleClass("open")
+	})
+
         var aviabodyclasses = AviaBrowserDetection('html');
 
 		$.avia_utilities = $.avia_utilities || {};

assets/shortcodes.js

@@ -3944,12 +3944,6 @@ $.extend( $.easing,
 
 				if(css_difference)
 				{
-					//if no transform property is set set a 3d translate to enable hardware acceleration
-					if(!($.avia_utilities.supported.transition+"transform" in prop))
-					{
-						prop[$.avia_utilities.supported.transition+"transform"] = "translateZ(0)";
-					}
-					
 					var endTriggered = false;
 					
 					element.on(end,  function(event)

functions.php

@@ -107,6 +107,10 @@ namespace ITSociaal\Themes\Houtgrutter
 	}, 32767);
 
 	\add_filter("kriesi_backlink", F::always(""));
+	\add_filter("avf_google_fontlist", F::always(
+		"Titillium+Web:600,600italic|Ubuntu:400,400italic"
+	));
+
 	\add_action("wp_enqueue_scripts", function() {
 		wp_deregister_script("avia-compat");
 		wp_deregister_script("avia-default");

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

@@ -11,12 +11,15 @@ namespace ITSociaal\Themes\Houtgrutter\Includes;
 <?php         echo HelperMainMenu::search(); ?>
 
         </ul>     <!-- #MainMenu -->
+        <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>    <!-- .shopmenu -->
     </nav>    <!-- .menu -->

style.css

@@ -7,53 +7,185 @@ Author URI: http://www.itsociaal.nl/
 Template: enfold
 */
 
-#wrap_all>h1 {
-	margin-top: 0;
-	margin-bottom: 0;
+/* Oude quickcss contents */
+.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
+	background: rgba(95, 48, 122, 0.5);
 }
 
+p { font-size: 15px; }
+h2 { font-style: italic; }
+div.modern-quote h3.av-special-heading-tag { font-weight: 600; }
+.openingstijden span { display: inline-block; width: 3ex; }
+
+
+
 /* verbergt de titels van de paginas */
 h1.main-title.entry-title { display: none; }
 strong.main-title.entry-title { display: none; }
 
 /* copyright info weghalen omdat dit een childtheme is */
 #socket .copyright { float: none; }
-span.copyright { display: table; margin: 0 auto; }
+span.copyright { display: table; margin: 0px auto; }
+
+
 
 .html_stretched div#wrap_all, #main { background: #FFF; }
 .html_header_top.html_header_sticky body#top div#wrap_all div#main,
 .html_header_top.html_header_sticky.html_bottom_nav_header div#main,
 .html_header_top.html_header_sticky div#main,
-.content {
-	padding-top: 0;
-}
-ul { margin-left: 0; }
-ul, ol, h1 { margin-bottom: 0; }
+.content { padding-top: 0px; }
+ul { margin-left: 0px; }
+ul, ol, h1 { margin-bottom: 0px; }
+
+/* This allows position: sticky to work */
+html.responsive, .responsive body, #wrap_all { overflow-x: visible; }
+#wrap_all { overflow: visible; }
 
 #logo {
 	background: #565656;
-	text-align: center; /* centreer logo */
-	height: 61px;
+	text-align: center;
 }
-/* #main { z-index: 128; } not sure if needed */
+
+/* Onderwerpen op homepagina */
 body.home div.flex_column>div.avia-button-wrap>a.avia-button {
-	border-radius: 3px 3px 0 0;
+	border-radius: 3px 3px 0px 0px;
 }
 body.home div.flex_column>div.avia-image-container>div.avia-image-container-inner>img.avia_image {
-	border-radius: 0 0 3px 3px;
+	border-radius: 0px 0px 3px 3px;
 }
 
+/* custom webfonts */
+html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, 	#top .input-text,	#top input[type="text"],	#top input[type="input"],	#top input[type="password"],	#top input[type="email"],	#top input[type="number"],    #top input[type="url"],    #top input[type="tel"],    #top input[type="search"],	#top textarea,	#top select {
+	font-family: "Ubuntu", sans-serif;
+	font-weight: 400;
+}
+
+h1,h2,h3,h4,h5,h6, .avia_iconbox_title {
+	font-family: "Titillium Web", sans-serif;
+	font-weight: 600;
+}
+
+/* copyright text in footer */
+.copyright {
+		color: #fff;
+}
+
+
+html>body#top>div#wrap_all>div#main>:first-child { padding-top: 50px; }
+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; }
+
+@media only screen and (max-width: 384px) {
+	.responsive #top #wrap_all .container,
+	#main>div>div.container {
+		padding-top: 0;
+		width: 100%;
+		max-width: 100%;
+	}
+}
 
 /********************************************************************\
 |MENUMENUMENUMENUMENUMENUMENUMENUMENUMENUMENUMENUMENUMENUMENUMENUMENU|
 \********************************************************************/
+nav.menu, nav.menu a:visited, nav.menu a { color: #FFF; }
+nav.menu { background: #565656; }
+div.shopmenu { background: rgba(87, 37, 117, .95); }
+
+nav.menu a:hover {
+	background: transparent;
+	color: #000;
 
-#MainMenu:after,div.shopmenu:after {
-	content: " ";
+	border-bottom-color: #000;
+}
+div.shopmenu a:hover {
+	background: #7D4A9D;
+	color: #FFF;
+
+	border-bottom-color: transparent;
+	border-top-color: #FFF;
+}
+nav.menu a:focus, nav.menu a:hover {
+	text-decoration: none;
+}
+nav.menu a {
+	/* text content */
+	font-weight: 600;
+	white-space: nowrap;
+  padding: 0px 17px;
+
+	/* box */
 	display: block;
-	clear: both;
+	height: 50px;
+	line-height: 46px;
+
+	/* special effects */
+	transition: color .4s ease-in-out, border-color .3s ease-out, background-color .3s ease-out;
+	border-bottom: 2px solid transparent;
+	border-top: 2px solid transparent;
+}
+body.page-id-0 nav.menu div.mainmenu li.menu-item-273 a,
+body.shopp-collection nav.menu div.mainmenu li.menu-item-273 a,
+body.shopp-product nav.menu div.mainmenu li.menu-item-273 a,
+nav.menu div.mainmenu li.current-menu-item a {
+	border-bottom-color: #000;
+}
+nav.menu div.shopmenu li.current-menu-item a {
+	border-top-color: #FFF;
+}
+
+/* Flex layout */
+nav.menu ul {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: left;
+
+	height: auto;
+	max-height: 50px;
+	overflow-y: hidden;
+
+	transition: max-height .5s ease-in;
+}
+
+nav.menu {
+	max-height: 50px;
+	overflow-y: visible;
+	position: relative;
+	z-index: 1024;
+}
+nav.menu.open {
+	max-height: 1024px;
+}
+nav.menu.open div.hidez {
+	opacity: 1;
+}
+nav.menu.open ul {
+	display: block;
+	max-height: 1024px;
+}
+nav.menu div.expander {
+	position: absolute;
+	top: 0;
+	right: 8px;
+
+	width: 32px;
+	height: 50px;
+
+	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcKeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgp2ZXJzaW9uPSIxLjEiCnZpZXdCb3g9IjAgMCAzMS45OTk5OTkgMzEuOTk5OTk4IgpoZWlnaHQ9IjMyIgp3aWR0aD0iMzIiPjxnCnRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMjAuMzYyMikiLz48Zz48cmVjdApyeT0iMS4zMjgxMjQ5Igp5PSIyMS45OTk5OTgiCng9IjMuOTk5OTk5IgpoZWlnaHQ9IjMuOTk5OTk5NSIKd2lkdGg9IjIzLjk5OTk5OCIKc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIvPjxyZWN0CnJ5PSIxLjMyODEyNDkiCnk9IjUuOTk5OTk4NiIKeD0iNCIKaGVpZ2h0PSIzLjk5OTk5OTUiCndpZHRoPSIyMy45OTk5OTYiCnN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjEiIC8+PHJlY3QKcnk9IjEuMzI4MTI0OSIKeT0iMTMuOTk5OTk5Igp4PSI0IgpoZWlnaHQ9IjMuOTk5OTk5NSIKd2lkdGg9IjIzLjk5OTk5NiIKc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L2c+PC9zdmc+Cg==") center center no-repeat;
+}
+ul#MainMenu.menu {
+	padding-right: 48px;
+}
+
+
+.responsive #top #wrap_all>nav.menu .container, div.shopmenu {
+  width: 100%;
+	max-width: 100%;
+}
+div.shopmenu {
+	transition: opacity .4s ease;
 }
 
+/* Search box */
 .html_bottom_nav_header #top #MainMenu #menu-item-search > a {
 	padding-right: 17px;
 }
@@ -64,18 +196,13 @@ body.home div.flex_column>div.avia-image-container>div.avia-image-container-inne
 #MainMenu .avia-search-tooltip .avia-arrow {
 	background: #592A76;
 }
-
-nav.menu {
-	background: #565656;
-}
-nav.menu, nav.menu a, li.cart-subtotal {
-	color: #FFF;
-}
-nav.menu a,li.cart-subtotal {
-	height: 50px;
-	line-height: 46px;
-	font-weight: 600;
+.html_bottom_nav_header #MainMenu .avia-search-tooltip {
+	transform: translateZ(0px);
 }
+
+
+
+/*
 nav.menu li.cart-subtotal>img {
 	display: block;
 	position: absolute;
@@ -83,114 +210,87 @@ nav.menu li.cart-subtotal>img {
 	margin-top: -16px;
 	margin-left: -38px;
 }
-nav.menu a {
-	text-decoration: none;
-	display: block;
-	transition: color .4s ease-in-out, border-color .3s ease-out, background-color .3s ease-out;
-	border-bottom: 2px solid transparent;
-	border-top: 2px solid transparent;
+
+
+nav.menu,div.mainmenu,div.shopmenu {
+	height: 50px;
+	transition: opacity ease-out .2s;
+	opacity: 1;
+	width: 100%;
+	text-align: center;
 }
 
-div.shopmenu {
-	background: #5F307C;
+#MainMenu a, #ShopMenu a {
+	padding: 0px 17px;
+	white-space: nowrap;
 }
+*/
 
-body.page-id-0 nav.menu div.mainmenu li.menu-item-273 a,
-body.shopp-collection nav.menu div.mainmenu li.menu-item-273 a,
-body.shopp-product nav.menu div.mainmenu li.menu-item-273 a,
-nav.menu div.mainmenu li.current-menu-item a {
-	border-bottom-color: #000;
+body.page-id-0 div.shopmenu,
+body.shopp-collection div.shopmenu,
+body.shopp-product div.shopmenu {
+	transition: none;
+	position: static;
+	width: auto;
 }
-nav.menu div.shopmenu li.current-menu-item a {
-	border-top-color: #FFF;
+body.page-id-0 #main,
+body.shopp-collection #main,
+body.shopp-product #main {
+	margin-top: 50px;
+}
+body.page-id-0 div.hidez,
+body.shopp-collection div.hidez,
+body.shopp-product div.hidez {
+	opacity: 1;
+}
+div.hidez {
+	opacity: 0;
 }
 
-@media only screen and (min-width: 768px) {
-  html.responsive, .responsive body, #wrap_all {
-		overflow-x: visible;
+@media only screen and (min-width: 672px) {
+	nav.menu div.expander {
+		display: none;
+	}
+	nav.menu.open ul {
+		display: flex;
 	}
-	#wrap_all {
-		overflow: visible;
+	ul#MainMenu.menu {
+		padding-right: 0px;
 	}
+}
+@media only screen and (min-width: 768px) {
 	nav.menu {
-		overflow-y: visible;
+		overflow-y: visible/
+
 		position: -webkit-sticky;
 		position: sticky;
-		top: 0;
+		top: 0px;
 		background: rgba(77, 77, 77, .95);
 		z-index: 1024;
 	}
-	nav.menu,div.mainmenu,div.shopmenu {
-		height: 50px;
+	nav.menu ul#MainMenu {
+		justify-content: center;
 	}
-	div.shopmenu {
-		background: rgba(87, 37, 117, .95);
-		transition: opacity ease-out .2s;
-		opacity: 1;
-
-		position: absolute;
-		width: 100%;
-	}
-	body.page-id-0 div.shopmenu,
-	body.shopp-collection div.shopmenu,
-	body.shopp-product div.shopmenu {
-		transition: none;
-		position: static;
-		width: auto;
-	}
-	body.page-id-0 div.hidez,
-	body.shopp-collection div.hidez,
-	body.shopp-product div.hidez {
-		opacity: 1;
-	}
-
-	div.mainmenu {
-		text-align: center;
-	}
-	#MainMenu {
-		display: inline-block;
-	}
-
-	nav.menu li {
-		float: left;
-	}
-	nav.menu li.cart-subtotal {
-		float: right;
-		position: relative;
-		left: 16px;
-	}
-
-	nav.menu a:hover {
-		color: #000;
-		border-bottom-color: #000;
-	}
-
-	div.shopmenu a:hover {
-		background: #7D4A9D;
-		color: #FFF;
-		border-bottom-color: transparent;
-		border-top-color: #FFF;
-	}
-
-	nav.menu a {
-		padding: 0 17px;
-	}
-	#ShopMenu {
-		position: relative;
-		left: -16px;
-		overflow-x: hidden;
-	}
-
-	div.hidez {
-		opacity: 0;
+	nav.menu ul#ShopMenu {
+		left: -17px;
+		justify-content: left;
 	}
 }
 
 /**********************************************************************\
 |WEBSHOPWEBSHOPWEBSHOPWEBSHOPWEBSHOPWEBSHOPWEBSHOPWEBSHOPWEBSHOPWEBSHOP|
 \**********************************************************************/
+#main #shopp table { width: auto; margin: 0 auto; }
+#main #shopp #cart th { padding: 0 34px 0 0; }
+#main #shopp #cart th.money { padding: 0 0 0 34px; }
+body.page-id-0 #main { overflow-x: scroll; }
+#main #shopp #cart .item { width: auto; }
 #main #shopp form#cart a.button { font-weight: bold; }
 
+@media only screen and (min-width: 672px) {
+	body.page-id-0 #main { overflow-x: visible; }
+}
+
 #wrap_all a.avia-post-nav.avia-post-prev,
 #wrap_all a.avia-post-nav.avia-post-next {
 	display: none;
@@ -205,24 +305,17 @@ nav.menu div.shopmenu li.current-menu-item a {
 	color: #5F307C;
 }
 
-#main #shopp ul.products {
+#main #shopp ul.products,
+#main #shopp form ul li#billing-address-fields {
   clear: left;
 }
-#main #shopp ul.products>li.product {
-	float: left;
-	width: 29.3333%;
-	margin-right: 6%;
-}
-#main #shopp ul.products>li.product:nth-child(3n+3) {
-	margin-right: 0;
-}
-#main #shopp ul.products>li.product:nth-child(3n+1) {
-	clear: left;
-}
 #main #shopp ul.products>li.product form {
 	margin-top: 10px;
 	text-align: center;
 }
+#main #shopp ul.products>li.product form .addtocart {
+	white-space: normal;
+}
 #main #shopp.list ul.products li.product {
 	border-bottom: none;
 }
@@ -230,6 +323,9 @@ nav.menu div.shopmenu li.current-menu-item a {
 	width: auto;
 }
 
+#main #shopp li.product>a:hover {
+	text-decoration: none;
+}
 #main #shopp li.product>a {
 	display: block;
 	position: relative;
@@ -243,20 +339,13 @@ nav.menu div.shopmenu li.current-menu-item a {
 #main #shopp.list ul.products li img {
 	float: none;
 }
+
+
+
 #main #shopp .product-details {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	padding: 1.618em;
-
-	opacity: 0;
 	transition: opacity ease .4s;
-
-	border: .334em dashed red;
-	border-style: dotted dashed;
-	background: #5F307A;
+	background: rgba(87, 37, 117, .8);
 }
 #main #shopp .product-details,
 #main #shopp .product-details h3,
@@ -271,6 +360,48 @@ nav.menu div.shopmenu li.current-menu-item a {
 	display: block;
 }
 
+@media only screen and (min-width: 448px) {
+	#main #shopp ul.products>li.product {
+		float: left;
+		width: 47%;
+		margin-right: 6%;
+	}
+	#main #shopp ul.products>li.product:nth-child(2n+2) {
+		margin-right: 0px;
+	}
+	#main #shopp ul.products>li.product:nth-child(2n+1) {
+		clear: left;
+	}
+}
+@media only screen and (min-width: 800px) {
+	#main #shopp .product-details {
+		opacity: 0;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+	}
+	#main #shopp ul.products>li.product {
+		width: 29.3333%;
+	}
+	#main #shopp ul.products>li.product:nth-child(2n+1) {
+		clear: none;
+	}
+	#main #shopp ul.products>li.product:nth-child(2n+2) {
+		margin-right: 6%;
+	}
+	#main #shopp ul.products>li.product:nth-child(3n+3) {
+		margin-right: 0px;
+	}
+	#main #shopp ul.products>li.product:nth-child(3n+1) {
+		clear: left;
+	}
+
+}
+
+
+
 #main .advertentie {
 	clear: both;
 	position: relative;
@@ -280,21 +411,22 @@ nav.menu div.shopmenu li.current-menu-item a {
 	display: block;
 	width: 100%;
 	height: auto;
+	min-height: 400px;
 }
 #main .advertentie-content-wrap {
 	z-index: 2;
 	position: absolute;
 	top: 84px;
-	left: 0;
+	left: 0px;
 	bottom: 84px;
-	right: 0;
+	right: 0px;
 }
 #main .advertentie-content-wrap>.container {
 	height: 100%;
 }
 #main .advertentie-content {
 	float: left;
-	width: 480px;
+	max-width: 480px;
 	height: auto;
 	min-height: 196px;
 	max-height: 312px;
@@ -319,11 +451,24 @@ nav.menu div.shopmenu li.current-menu-item a {
 	margin-top: 26px;
 }
 
-@media only screen and (min-width: 768px) {
-	html>body.page-id-0>div#wrap_all>div#main,
-	html>body.shopp-collection>div#wrap_all>div#main,
-	html>body.shopp-product>div#wrap_all>div#main {
-		padding-top: 50px !important;
+@media only screen and (max-width: 672px) {
+	#main .advertentie-featured {
+		min-height: 320px;
+	}
+	#main .advertentie-content-wrap {
+		top: 50px;
+		right: 0px;
+		bottom: 0px;
+		left: 0px;
+	}
+	#top #wrap_all #main .advertentie-content-wrap>.container {
+		width: 100%;
+		max-width: 100%;
+	}
+	#main .advertentie-content {
+		max-width: 100%;
+		height: 100%;
+		max-height: 100%;
 	}
 }