Wordpress Tips for Divi theme users | MAC.NETWORK - for computer network and website solutions

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

Paste this code into Divi Theme Options > Integrations > Add code to the body.

<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

Copy the header.php from the parent theme to the child theme folder and edit it to include the following code at the very top. This will send IE7 users to another website that could be tailored to work for them.

<?php if ( strpos( $_SERVER[‘HTTP_USER_AGENT’], ‘MSIE 7’ ) ) {
header( ‘Location: https://macnetwork.co.uk/’ ) ;
} ?>

Overlay a screen effect on an image:

This effect uses a .png file as a screen overlay

#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

Sometimes you only want the CSS changes to apply at certain screen size, bracket the CSS like this:

@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

In Custom CSS / Main Element

-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%;