Skip to content

Instantly share code, notes, and snippets.

<script>
(function($){
$('body').on('click', '.dfh-27-hamburger-icon', function(){
$(".dfh-27-menu-row").toggleClass("dfh-27-menu");
});
$('body').on('click', '.dfh-27-close-icon', function(){
$(".dfh-27-menu-row").toggleClass("dfh-27-menu");
});
if($(window).width() < 981){
$('body').on('click touchstart', '.et-menu .menu-item-has-children > a', function() {
@elicus
elicus / Hamburger.js
Last active October 14, 2021 12:32
How To Build Divi Hamburger Menu on Desktop
<script>
(function($){
$('body').on('click', '.de-menu-ham-icon', function(){
$(".de-menu-row").toggleClass("de-menu-active");
});
$('body').on('click', '.de-menu-close-icon', function(){
$(".de-menu-row").toggleClass("de-menu-active");
});
$('body').on('click touchstart', '.et-menu .menu-item-has-children > a', function() {
$(this).attr('href', '#/');
@elicus
elicus / Hamburger.css
Last active May 20, 2021 05:10
How To Build Divi Hamburger Menu on Desktop
<style>
.et-menu .menu-item-has-children > a:after {
content: '\4c'!important;
font-size: 24px !important;
font-weight: normal!important;
padding-left: 10px;
right: auto !important;
}
.et-menu .menu-item-has-children > .de-menu-switched-icon:after {
/* Add Show/Hide Add to Cart button option */
if ( ! function_exists( 'de_append_theme_customizer' ) ) {
function de_append_theme_customizer( $wp_customize ) {
$wp_customize->add_setting( 'et_divi[add_to_cart]', array(
'type' => 'option',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'wp_validate_boolean',
) );
$wp_customize->add_control( 'et_divi[add_to_cart]', array(
/* Ajax Add to Cart button */
if ( ! function_exists( 'de_add_to_cart_button' ) ) {
function de_add_to_cart_button(){
if ( true === et_get_option( 'add_to_cart', false ) ) {
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
}
}
add_action( 'init', 'de_add_to_cart_button' );
}
.el-flex-row {
display: flex;
flex-wrap: wrap;
}
.el-flex-row .et_pb_column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#container').masonry({
"itemSelector": ".item",
"columnWidth": ".grid-sizer",
});
});
</script>
html {
overflow-y: scroll;
}
body {
font-family: sans-serif;
margin: 0; padding: 0;
}
.item {
<div id="container">
<div class="grid-sizer"></div>
<div class="item">
<img src="Your Image URL" class="image">
</div>
<div class="item">
<img src="Your Image URL" class="image">
</div>
<div class="item">
<img src="Your Image URL" class="image">
@elicus
elicus / Text over an image on hover.css
Created November 20, 2020 06:38
Text over an image on hover
.clip-image-hover p {
transition: background-image 300ms ease 0ms;
background-repeat: no-repeat;
background-position: left;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: #FFFFF;
}
.clip-image-hover p:hover {