How to Control the Divi Mobile Menu Top Border

DIVI is one of the most successful WordPress themes over time! So there is a craze among DIVI users to know more tips and tricks about DIVI. That’s why we’ve been trying to make a content series based on different types of DIVI tricks and tips. To maintain the serial process today, we’ll discuss how to control the DIVI mobile menu top border! 

Let’s know how to control the DIVI mobile menu top border.

By default, when we click on the hamburger menu on mobile or tablet devices, we will find a blue 3px border in Divi. This default blue border will be shown on mobile and tablets under the hamburger menu. 

Adding some color to your Divi mobile menu 

Adding some color to your Divi mobile menu is an excellent idea.

Do you want to change the top border color of your Divi website’s mobile menu to match your site’s branding and want it page-by-page? Yes, it is possible with a little bit of CSS.

You can use this CSS on a page by using the page options custom CSS or add it to the Divi theme option Global CSS if you want to add the global custom CSS code to your theme and change the color to match your website colors. 

You can add the global CSS by going to  WordPress Dashboard > Divi > Theme Option and scrolling down until you find Custom CSS.

Now I am showing how to change it and what it looks like when changing the border color and how to remove the border.

Change the mobile menu top border-color

If you want to change the mobile menu top border color, please go to  WordPress Dashboard > Divi > Theme Option and insert the CSS at Custom CSS. 

.et_mobile_menu {
border-top: 3px solid #d9b310 !important;
}

Note: You can change/adjust the color code instead of #d9b310

Make sure you click on the Save Changes button after inserting the custom CSS to save the changes.

Changing the Border on the top.

If you don’t want to use any border at the top, please go to WordPress Dashboard > Divi > Theme Option and insert the CSS at Custom CSS. 

.et_mobile_menu {
border-top: none !important;
}

Make sure, after inserting the custom CSS, press on Save Changes button.

Ahh, that’s it! That’s how you can easily control the mobile menu top border. 

Conclusion

If you’re a DIVI user, you may know DIVI is one of the most functional and multipurpose themes ever. So, you can design your website on your own!  But sometimes, you must change some core files to make particular differences. Today, we tried to share with you how to control the DIVI mobile menu top border.

I hope you enjoyed the blog. Please comment if you face any problems while controling the DIVI mobile menu top border. I’ll reach you to solve your issue. Till then, take care and enjoy a happy ride with team WebExtent. 

Suggested Blog: How to Create a Custom Global Header in Divi

Please subscribe to our YouTube Channel for WordPress video tutorials if you enjoy this article. You can also catch us on Twitter, Instagram, and Facebook. 

Thanks

Tags: DIVI DIVI Menu DIVI Mobile Menu DIVI Theme DIVI Tips WordPress tips