Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to change sub menu font color and background color

How to change sub menu font color and background color

This tutorial will show you how to customize the drop down sub-menu background color and font color.

1) Click here to open your Weebly editor
2) Click on “design” then into “edit html/css”
3) Click into “main_style.css” and locate this code:

#wsite-menus .wsite-menu li a, #wsite-menus .wsite-menu li a {
position: relative;
display: block;
background: #fff;
border: none;
text-decoration: none;
font-size: 13px;
font-weight: normal;
line-height: 1;
padding: 10px 5px;
color: #000;
zoom: 1;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}

Depending on your theme design, the codes may look different. The important thing here is to locate the code highlighted above to indicate which code controls the drop down sub-menu.

4) Styling change

#wsite-menus .wsite-menu li a, #wsite-menus .wsite-menu li a {
position: relative;
display: block;
background: #fff;
border: none;
text-decoration: none;
font-size: 13px;
font-weight: normal;
line-height: 1;
padding: 10px 5px;
color: #000;
zoom: 1;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}

  1. Font color: color: #ffffff; – You can choose your hex color code here: colorpicker
  2. Background color: background: #fff; – You can choose your hex color code here: colorpicker

5) Once you are happy with your change, save & re-publish your site for the change to take effect.