Langsung ke konten utama

Membuat menu tampilan mobil pada default template pada divi page builder]

 /* Change the hamburger icon to an X when opened */

.mobile_nav.opened .mobile_menu_bar:before {

    content: '\4d';

}


===================


/* Set the Divi Mobile Nav to Fixed on scroll */

@media (max-width: 980px) {

.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {

    position: fixed;

}

}

.et_mobile_menu {

    overflow: scroll !important;

    max-height: 83vh;

}

/* Add the word MENU after the mobile nav hamburger icon */

.mobile_menu_bar:after {

    content: 'MENU';

    bottom: 10px;

    left: 10%;

    position: relative !important;

    color: #FFF;

}



===================


/* Set the Divi Mobile Nav to Fixed on scroll dengan tulisan MENU setelah burger */

@media (max-width: 980px) {

.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {

    position: fixed;

}

}

.et_mobile_menu {

    overflow: scroll !important;

    max-height: 83vh;

}

/* Add the word MENU after the mobile nav hamburger icon */

.mobile_menu_bar:after {

    content: 'MENU';

    bottom: 10px;

    left: 10%;

    position: relative !important;

    color: #FFF;

}

/* Change the hamburger icon to an X when opened */

.mobile_nav.opened .mobile_menu_bar:before {

    content: '\4d';

}


===================

https://divilife.com/create-fixed-mobile-menu-divi/




Komentar

Postingan populer dari blog ini

Quick Tip: Remove Space between Footer and Post in Divi

 Divi has a weird quirk where any blog post that is published has a space between the post and the footer. Luckily there is a quick fix. Click on the gear icon in the Divi Visual Builder. In the CSS section of the post editor, add the following code snippet and save. .single .et_pb_post {  margin-bottom: 0;  padding-bottom: 0; } #left-area {  padding-bottom: 0 !important; } If it is saved correctly, you should no longer see a space between the post and footer.

Membuat background colom atau section yang saat di hover zoom

https://www.youtube.com/watch?v=EMud8mbVZ50 Pada colom yang ada backgroundnya, masuk ke ADVANCE - CUSTOM CSS - MAIN ELEMENT: background-size:100%; transition: all 0.5s ease; dan di HOVER: background-size:130%; Start write the next paragraph here