Hey guys. Today we continue reviewing our “Handy Divi Snippets” and why they may come in handy one day. And if you have any handy code snippets you’d like to share, please leave a comment below.
Nesting Sub Menu Items on Mobile
CSS:
#main-header .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
position: relative;
}
#main-header .et_mobile_menu .menu-item-has-children>a:after {
font-family: 'ETmodules';
text-align: center;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
position: absolute;
}
#main-header .et_mobile_menu .menu-item-has-children>a:after {
font-size: 16px;
content: '\4c';
top: 13px;
right: 10px;
}
#main-header .et_mobile_menu .menu-item-has-children.visible>a:after {
content: '\4d';
}
#main-header .et_mobile_menu ul.sub-menu {
display: none !important;
visibility: hidden !important;
transition: all 1.5s ease-in-out;
}
#main-header .et_mobile_menu .visible>ul.sub-menu {
display: block !important;
visibility: visible !important;
}JS:
<script type="text/javascript">
(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', '#');
}
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).parent().toggleClass('visible');
});
}
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>If you ever worked on websites that have over 20 pages of content, you’ll see how long the mobile menu can get. These code snippets will nest all sub menu items on mobile and tablet. You can find the full tutorial on Elegant Themes blog.
Change “Select Page” Text on Mobile Menu
PHP:
add_filter('gettext', 'change_select_page_text', 20, 3);
function change_select_page_text($text, $orig, $domain ) {
if ($domain == 'Divi' and $orig == 'Select Page') { return 'Menu'; }
return $text;
} Depending on which header format you select, Divi will place the logo on top and display the string “Select Page” adjacent to a menu icon. This code will change “Select Page” to “Menu”. If “Menu” doesn’t suit your clients needs, simply replace the string ‘Menu” to whatever you like.
Remove “Projects” Custom Post Type
PHP:
add_filter( 'et_project_posttype_args', 'mytheme_et_project_posttype_args', 10, 1 );
function mytheme_et_project_posttype_args( $args ) {
return array_merge( $args, array(
'public' => false,
'exclude_from_search' => false,
'publicly_queryable' => false,
'show_in_nav_menus' => false,
'show_ui' => false
));
}This may not come in handy all the time, but I find myself using it quite a bit. Especially when a client is not utilizing the Projects custom post type Divi ships with. This code will hide it, which helps de-clutter the back-end.
Enable SVG Upload
PHP:
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');Not sure if you have noticed yet, but WordPress does not allow SVG files to upload by default. This code snippet will enable that option.
Unhide Secondary Menu on Mobile
CSS:
#et-secondary-menu, #et-secondary-nav {
display: block !important;
}If we were given a vote to select a section for Divi to improve, my vote is for the secondary menu header. Although I have mastered many different ways to style it using hacks and such, this could snippet will at least prevent the secondary menu from disappearing on tablet and mobile.
Control Opacity on Navigation Links
CSS:
#et-info-email:hover,
#et-secondary-menu > ul > li > a:hover,
#top-menu-nav > ul > li > a:hover,
.et-social-icons a:hover {
opacity: 1;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}This might seem like a waste of a code, but I personally find it useful since the opacity setting for the navigation links isn’t obvious to me. This code snippet will target the classes that control the opacity (which defaults at 0.7) on the navigation links, which gives me the power to well, turn it off!
Navigation Link Hover Effect
CSS:
#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
#top-menu a::before {
margin-right: 10px;
color: #333333;
font-weight: bolder;
content: '|';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
#top-menu a::after {
margin-left: 10px;
content: '|';
color: #333333;
font-weight: bolder;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
#top-menu a::before,
#top-menu a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}Last but not least, this snippet will add a cool hover effect to the navigation links. To see it in action, visit this site and hover over the navigation links.
Although this is the last snippet currently, our Handy Divi Snippets page will be updated periodically so don’t forget to check back in. Till the next time Divi Designers!
0 Comments