Let’s remove the social icons from DIVIs footer/bottom bar only for mobile using CSS. There are many option you can have for your social icons in the footer. You can enable or disable it on both desktop and mobile, or using this tutorial you can enable it on desktop but hide it on mobile.

Show Social Icons on Desktop and Mobile

For the desktop, there is an option in the DIVI – Theme Customizer – > Footer –> Footer Elements –> “SHOW SOCIAL ICONS” that you can check (or uncheck) to enable or disable it. Checking the option “SHOW SOCIAL ICONS”  will enable it on the desktop and mobile as shown below.

Social Icons enabled in DIVI

Social Icons enabled – DIVI – Mobile

Remove Social Icons from Desktop and Mobile

To remove the social icons from both desktop and mobile, make sure you uncheck the “SHOW SOCIAL ICONS” box in the DIVI Theme customizer as shown below.

Social icons disabled on desktop and mobile

Keep Social Icons on Desktop and Remove it only on Tablets and Mobile

If you wanted to keep the social icons on the desktop and disable/remove it only on mobile from DIVI’s bottom bar/footer, we can use a little bit of CSS. First make sure you have checked the “SHOW SOCIAL ICONS” in the Theme Customizer–> Footer –> Footer Elements as shown in the image above.

To add the CSS, head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Disable Social Icons on Bottom bar on tablets and smaller devices */
@media all and (max-width: 980px) {
#footer-bottom .et-social-icons {display: none;}
}

This will show the icons on the desktop but will remove it from the tablet and mobile devices as shown below.

Social Icons removed on Mobile – DIVI

I hope this tip was useful and you get a chance to use it on your website. If you do, please leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts –

• How to Remove the Bottom Bar/Footer from DIVI
• Add Background Image to the DIVI Footer/Bottom Bar

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Change the color of the primary menu and sub menu links on desktop and mobile, when you hover over them. By default you can set the color of the Primary Menu items and only the active menu item using the DIVI options.

Its a good visual indicator for the user when you change the color of the menu, specially if you have long sub menus. 

Let’s add some CSS to change the colors for desktop and mobile. To do this head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box. 
I have used an orange color (#ffa500) in my example CSS. Change it to the color best suitable for your website.

Add CSS to Change Hover Colors for your Primary Menu

/* Change color on primary menu */
#top-menu-nav #top-menu a:hover,#mobile_menu_slide a:hover
{
    color: #ffa500!important;
    opacity:1 !important;
}

Change color of primary menu on hover – DIVI

Add CSS to Change Hover Colors for your Mobile Menu

/* Change color on Mobile Menu  */
.et_mobile_menu li a:hover, header#main-header.et-fixed-header ul li ul li a:hover
{
color: #ffa500 !important;
opacity:1 !important;
}

Change color of mobile menu on hover – DIVI

I hope this DIVI Tip was helpful and if you do use it on your site, leave me a comment. For more such useful tips on WordPress and DIVI, do check out my DIVI Blog. 

Related Posts –

• How to Remove the Drop Down Arrow from the DIVI Primary Menu
• How to Change Hamburger or Mobile Menu Color in Divi
• Change the Color for Email, Phone and Social Media Icons in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Do you want to display the social media icons on the mobile?. By default when you add social media icons and display it on the top header, it will not be displayed on the mobile.

There is no option in DIVI to display social icons on mobile. But we can add a few lines of CSS and display the social icons on mobile also. This is helpful for quick access to social media on your mobile as most people use mobile devices these days. 

Social icons on desktop – DIVI

When you view your website on a mobile device, the social icons will not show by default as shown below. 

No social icons on mobile – DIVI

Display Social Icons on Mobile using CSS

Let’s add some CSS to force the DIVI theme to show the social icons. To do this head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

@media only screen and (max-width: 768px) {
div#et-secondary-menu {
display: block !important;
margin-top: 5px !important;
}
#et-secondary-menu>div.et_duplicate_social_icons>ul>li a {
display: block;
padding-bottom: .50em;
}
}

Now the social icons will show on the mobile. Make sure you adjust the padding-bottom in the CSS. Make it bigger if you want more space below the social icons. Also if you want to display the icons on tablet also, increase the max-width: 768px to a higher value like max-width: 992px.

Social icons displayed on mobile – DIVI

I hope this tip has been helpful to you and if you do use it on your DIVI website, do leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog. 

Related Posts –

• Add Extra Text on your DIVI Top Header Before the Phone Number
• Turn Header Phone Number into Clickable Link in DIVI
• Change the Color for Email, Phone and Social Media Icons in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

In today’s quick tip we will add a background image to the DIVI mobile menu using a few lines of CSS.

First of all add the image to your media library and get the URL of the image. Make sure you choose an image that contrasts well with the menu item. You can also change your menu and sub menu item colors using the DIVI theme customizer. I have used an image of 600×900 pixels.

Copy the URL from the media library as shown below.

URL from media library

CSS to Add a Background Image to the Mobile Menu

Add the following CSS. To do this head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

.mobile_nav.closed #mobile_menu,
.mobile_nav.opened #mobile_menu {
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background: url(“https://wpportfolio.com/staging/wp-content/uploads/2019/09/mobile-background.jpg”);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Make sure you change the background url to the image url that you copied from your media library.

Here is what it should look like.

Picture Courtesy: Pixabay https://pixabay.com/photos/marine-water-wave-background-4487710/

If you liked this tip or used it on your website, do leave me a comment with your website. You can read more such tips on my DIVI BLOG.

Related Posts –

• Add Extra Text Before or After your Mobile Menu in DIVI
• Change the Color of the Hamburger Menu on Mobile and Tablet.

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Lets add text before or after the mobile menu in DIVI. By default on mobile the menu turns into a hamburger icon. This tip may be useful specially if you want to explicitly add some text next to the hamburger. I read this tip on a Elegant Themes blog few years back and have used it occasionally on my client sites.

Here’s what the default menu looks like in DIVI. I have changed the color of the hamburger menu to black in this case. Read this post, If you want to know how to change the color of the mobile menu.

Default mobile menu in DIVI

Add Text After the Mobile Menu

Here is the css you will need to add text after the hamburger menu. Head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

/* Add text after the hamburger menu in DIVI */
.mobile_menu_bar:after {
position: relative !important;
content: ‘My Menu’;
bottom: 10px;
left: 12%;
color: black;
}

This will look like the following. Change the text and color to match your website colors.

Text after mobile menu

Add Text Before the Mobile Menu

You can also add the text before the hamburger menu. For that use the following CSS.

/* Add text before the hamburger menu */
#et_mobile_nav_menu:before {
content: ‘My Menu’;
position: absolute !important;
bottom: 29px;
right: 35px;
color: black;
}

Here’s the result of the CSS.

Text before mobile menu

This is an easy tip to customize your DIVI site, with a few lines of CSS. I hope you liked this tip and if you do use it on your site, do leave a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts –

• Change the Color of the Hamburger Menu on Mobile and Tablet.
• Change Mobile Menu Top Border in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

By default when you click on the hamburger menu on mobile or tablet devices, you will find a blue border in DIVI. This blue border is right below the hamburger icon and above the mobile menu items.

Do you want to change the top border color of the mobile menu for your DIVI website to match the branding of your site.?

Add the following CSS code to your theme and change the color to match your website colors. You can add the CSS either to your style.css in your child theme OR go to the DIVI – Theme Options on your dashboard. In the General Tab, scroll down to the “Custom CSS” text area and add the CSS shown below the images.

I have set the top border to a shade of yellow (#d9b310) in the example below, to match my website colors. Replace the (#d9b310) in the code to the color of your choice to match the branding of your website.

Here is what it looks like when viewing my site on mobile. The images and CSS below show the default blue border out of the box, changing the border color and how to remove the border.

Related Posts –

• Change the color of the hamburger menu on mobile and tablet.
• Add extra text before or after your mobile menu in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.