Blog

Technical knowledge base for your reference!

5 Simple CSS hacks for Divi

5 Simple CSS hacks for Divi

In this blog post, we are going to explore some simple CSS hacks that help you customize several sections in Divi. Regardless of your technical expertise, you can take advantage of all the hacks below to create a stunning website using the Divi Page Builder or Divi theme. Here’s a quick look at the 10 simple CSS hacks that are considered safe, as none of these will be affected by a parent theme update.

  1. Remove the line below the menu
  2. Add dropcap to text
  3. Overlay the logo
  4. Enable hamburger menu on desktop
  5. Adding hover effects to social icons

Divi provides you with tons of customization options for all the elements on your website, but if you really need to add custom CSS, there are two ways to do it. You can apply CSS to the entire site by using the Theme Options (referred as ePanel in earlier versions) section or if you want to apply changes just to a specific module on a page, you can use Advanced Design Settings, which has a Custom CSS tab.

To add it via theme options, go to WP > Divi > Theme Options. On the General Settings tab, scroll to the bottom, where you will find a Custom CSS field. Enter your custom CSS and click Save. Bravo, you are done! Your CSS will now be reflected on your site, just like editing a style.css file.

While each Divi module will have its own General and Advanced settings, they all also have a Custom CSS tab for you to enter your own CSS. The advantages of using the Theme Options or the Custom CSS tabs is to avoid creating a child theme and found to be very effective and time-saving.


CSS hack #1

Remove the line below the menu

If you take a closer look at the menu bar, there would be a grey line that appears below it. When you have a white body content, the line would clearly be visible and there comes the necessity of removing it. The line is nothing but a shadow that Divi adds to the main header and here is the code to remove it.

 #main-header{ 
   -webkit-box-shadow:none!important; 
   -moz-box-shadow:none !important; 
   box-shadow:none !important;}

And, just in case you want to remove the shadow from the menu bar too, use this code:

 
#main-header.et-fixed-header { box-shadow: none !important; }


CSS hack #2

Add dropcap to text

Dropcaps or initial caps are great styles for your text and are often seen in printed magazines and newspapers. Adding a dropcap to your blog titles gives an editorial feel to your posts/pages. This is one of the simple and easy styling available for your texts but has a greater feel overall.

.et-dropcap {
    font-family: OpenSans;
    font-size: 75px;
    color: #e75146;
    line-height: 0.5;
    padding-top: 10px;
}

You might need to put some little effort to play with the line height and font size values to achieve the desired effect. But we are sure that you would appreciate this hack for the final impact it creates to your titles


CSS hack #3

Overlay the logo

Though the default Divi header bar looks elegant, we always feel that there could be some room for the logo especially when you have a bigger size logo. Since the header bar resizes itself by default as you scroll down the page, the logo also gets sized down to fit into the bar, which makes it appear smaller.

The CSS hack code given below modifies the z-index of the logo and ensure it gets overlaid on any content on the page as you scroll down. Also, you can adjust the max-height and margin-top values until your logo displays exactly the way you want it to appear.

#top-header {z-index: 99999;}
 #logo {
 max-height: 150%;
 margin-top: -25px;
 /**the logo just sits on top of the header**/
 z-index: 109999;
 }
 
@media only screen and (max-width : 980px) {
 #logo { margin-top: 0px}
}


CSS hack #4

Enable hamburger menu on desktop

At times when you have a long menu item and you see them stacking closer, you would always wish to show up a menu similar to the mobile menu. Divi does it by default when you browse the site on mobile and you can use the code below to bring up that menu on the desktop port as well.

@media only screen and ( min-width:980px ) {
 #et_mobile_nav_menu { display:block }
 #top-menu-nav { display:none; }
 }
 
/**use your own values to style as you wish**/
 
.mobile_menu_bar:before {
 content: "\61";
 font-size: 30px;
 position: relative;
 top: 0;
 left: 0;
 cursor: pointer;
 }
}

This helps you to have an uncluttered menu on the desktop viewport.


CSS hack #5

Adding hover effects to social icons

The default social icons on Divi’s bottom bar have a relatively boring, hover effect. And there is always a need for a designer to make it look better by matching it with the site’s color theme.

You have 2 options – to style the icons individually or to have the same style for all the icons. To style them all at once, use the code below:

#footer-bottom .et-social-icons a:hover {
 color:#e75146; //adds an orange color to the icons
 }

If you wish to style the icons individually then you can use this code:

#footer-bottom .et-social-icons .et-social-facebook a:hover {
 color:#3b5998 !important;
 }
 #footer-bottom .et-social-icons .et-social-twitter a:hover {
 color:#00aced !important;
 }

NOTE: Please feel free to use the color code of your choice to achieve the desired effect


There are always several customization options available to Divi and one can find hundreds of tutorials on whatever you wish to implement. To make your own CSS customization in Divi, it offers several options so that you can do such customizations without the necessity to touch any core files.

Website Design & Development

Digital Media Marketing

  Toll Free: 1-888-666-0786

  Fax: 91-422-4225889

  sales@actmedia.net

Follow Us On

Copyright © actmedia.net 2001 - 2015. All rights reserved.
actmedia is a division of Amulya Infotech, an award winning ISO certified firm.