Divi is a popular WordPress theme (and theme builder) that comes with a host of features and allows for great customization options. In today’s Divi tutorial, we cover how to change the mobile menu’s top border color on a WordPress website using the Divi theme.
Most design changes you may want to make like changing font colors, padding, or background color styles can be done via Divi’s native front-end builder.
There are instances where specific changes require CSS to complete the task. Changing the mobile menu’s top border color is one such example when we need to use CSS to make the desired change. If you are unsure on how to add CSS to your Divi website, check out our other Divi tutorial post: How to Add Custom CSS to Your Divi Website.
Change the Mobile Menu’s Border Color
When you open the mobile menu on a new Divi installation, you will see a light blue horizontal line across the top of the menu.
Divi adds this top border by default and sets the style as seen. Since this default color will likely not match your website’s brand or theme, it’s important to be able to change the color of the top border line. To make this change, use the following CSS snippet.
.et_mobile_menu {
/* Style the width, line style, and color of the top border */
border-top: 3px solid green;
}
Additional Mobile Menu Border Styling
Using the CSS snippet listed above actually gives you control of three important properties. Feel free to make adjustments to any of the properties to achieve the style that best suits your needs.
- The width of the line: The first property in the border-top CSS controls the line width. You can change the width of the line to any value you want. The above snippet sets the border-top line to 3 pixels wide.
- The line style: The second property in the border-top CSS controls the line style. You can change the line style to solid, dotted, dashed, or more. The above snippet sets the border-top line style to solid.
- The line color: The third property in the border-top CSS controls the line color. You can set the line color using values like ‘green’ or ‘blue’ or even using a specific hexadecimal value like #FFB6E6. The above snippet sets the border-top color to green.
Below is another CSS snippet showing changes to all border-top CSS properties.
.et_mobile_menu {
/* Style the width, line style, and color of the top border */
border-top: 5px dashed #FFB6E6;
}
Remove the Mobile Menu’s Top Border
If you don’t like the border-top line at all, you can remove it completely with the CSS snippet:
.et_mobile_menu {
/* Style the width, line style, and color of the top border */
border-top: none;
}
Final Tips, Tricks, and Resources
- For additional reading on border line styling, check out the resources provided by W3 schools
- If you do not know how to add CSS to your Divi website, check out our Divi tutorial post: How to Add Custom CSS to Your Divi Website
