Divi Code Snippets

For the DIYer looking for a little extra help with their Divi Site!

Mobile Menu Break Point

[Display Hamburger Menu on Tablet Size Screens as well as Mobile sized screens]

Add to Child Theme CSS:
@media only screen and ( max-width: 1200px ) {
#et_mobile_nav_menu {
display: block;
}
#top-menu-nav, #top-menu {
display: none;
}
}

Left Aligned Homepage Slider Text

Add to Child Theme CSS:
.et_pb_slider .et_pb_container {
float: left;
width: 60%;
}
.et_pb_slider {
padding-left: 0;
}
#et-info{
float:right;
}

Displaying Text in Navigation area on Desktop Only

Add to Child Theme CSS:
@media screen and (max-width: 1000px) {
div.header {
display:none;
padding: 35px;
}
}

Add to Child Theme Header:

<div class=”header” >
<p> /*Your Text/Icons/Button Here*/ </p>
</div>

Remove Bullets from Links in Footer

Add to Child Theme CSS:
#footer-widgets .footer-widget li:before {
display: none;
}
html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
font-size: 15px;
font-weight: normal;
line-height: 15px;
padding-left: 0px;
}

“Un-Breaks” All Lines in Divi

You’ll notice as you switch from device to device, words will break unevenly, dropping single letters down to the next line, making it impossible to read. This code will fix that!

Add to Child Theme CSS:
#et-secondary-menu li, #top-menu li, .et_pb_gallery_item, .et_pb_portfolio_item, .et_pb_blurb_content, .et_pb_tabs_controls, .et_pb_tab, .et_pb_slide_description, .et_pb_pricing_heading, .et_pb_pricing_content, .et_pb_promo_description, .et_pb_newsletter_description, .et_pb_counter_title, .et_pb_circle_counter, .et_pb_number_counter, .et_pb_toggle_title, .et_pb_toggle_content, .et_pb_contact_main_title, .et_pb_testimonial_description_inner, .et_pb_team_member, .et_pb_countdown_timer_container, .et_pb_post, .et_pb_text, .product, .et_pb_widget {
word-wrap: normal;
}