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.

Default Blue Line Border in DIVI

Default Blue Line Border in DIVI

This the default blue border that will be shown on mobile and tablets under the hamburger menu.

Top Mobile Menu Border Divi

Top Mobile Menu Border Divi

/* Change the mobile menu top border */
.et_mobile_menu {
border-top: 2px solid #d9b310!important;
}

Remove Top Border Mobile Menu in Divi

Remove Top Border Mobile Menu

/* Remove the mobile menu top border */
.et_mobile_menu {
border-top: none !important;
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

I would love to hear about how I can help your business website. I have specialized in using the DIVI theme from Elegant Themes since the past five years. If you would like to see the projects that I have completed as a DIVI Designer, please do have a look at my portfolio. Please contact me and I will get back to you immediately.

Share This