App style drop down mobile menu
/** App Style header and Drop Down Menu **/
.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;
}
Collapse Nested Mobile Menu items
<style>
.et_mobile_menu .menu-item-has-children > a { background-color: transparent; }
#main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }
.et_mobile_menu .menu-item-has-children > a:after { content: ‘+’; position: absolute; right: 20px; }
</style>
<script>
(function($) {function setup_collapsible_submenus() {
var $menu = $(‘#mobile_menu’),
top_level_link = ‘#mobile_menu > .menu-item-has-children > a’;
$menu.find(‘a’).each(function() {
$(this).off(‘click’);if ( $(this).is(top_level_link) ) {
$(this).attr(‘href’, ‘#’);
$(this).next(‘.sub-menu’).addClass(‘hide’);
}if ( ! $(this).siblings(‘.sub-menu’).length ) {
$(this).on(‘click’, function(event) {
$(this).parents(‘.mobile_nav’).trigger(‘click’);
});
} else {
$(this).on(‘click’, function(event) {
event.preventDefault();
$(this).next(‘.sub-menu’).toggleClass(‘visible’);
});
}
});
}$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
Send Internet Explorer Users to another URL
<?php if ( strpos( $_SERVER[‘HTTP_USER_AGENT’], ‘MSIE 7’ ) ) {
header( ‘Location: https://macnetwork.co.uk/’ ) ;
} ?>
Overlay a screen effect on an image:
#fly-screen {background: transparent url("http://domain.com/wp-content/uploads/2015/11/pattern.png") repeat scroll left top;height: 100%;position: absolute;top: 0;width: 100%;z-index: 2;}
Add a Message before the Divi Captcha
.et_pb_contact_right:before { color: #afafaf; content: "(to show you're human) "; font-size:smaller; position: static; }
for B&W Map change percentage for saturation
.et_pb_map_container {filter: url("data:image/svg+xml;utf8,#grayscale");filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%);}
Apply CSS at certain screen sizes only
@media screen and (max-width: 767px) {.custom_section{height:0;}}
Improve Contact Form 7 appearance
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {background-color: #fff !important;border: none !important;width: 100% !important;-moz-border-radius: 2 !important;-webkit-border-radius: 2 !important;border-radius: 2 !important;font-size: 14px;color: #999 !important;padding: 8px !important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}.wpcf7-submit {color: #F28A00 !important;margin: 6px auto 0;cursor: pointer;font-size: 20px;font-weight: 500;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;padding: 1px 10px;line-height: 1.7em;background: transparent;border: 2px solid;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;transition: all 0.2s;}.wpcf7-submit:hover {background-color: #fff;border-color:#eee;padding: 1px 10px !important;}
Increase Saturation on gallery thumb nails
-webkit-filter: saturate(1.75);filter: saturate(1.75);
Make Superscript look right & proper
sup{font-size: 70%;vertical-align: text-middle;line-height: 0;}
Make SVG resize properly in IE9+10
/** Let's target IE to respect aspect ratios and sizes for img tags containing SVG files** [1] IE9* [2] IE10+*//* 1 */.ie9 img[src*=".svg"] {width: 100%;}/* 2 */@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {img[src*=".svg"] {width: 100%;height:100%;}}