Menu Module Sub-Menu Text Color, Border Color, Spacing

Hello,

How can I set the Menu Module sub-menus text color to be black on all states. Can’t seem to do it within the menu module settings. I’ve tried using Chrome Inspector CSS Hero but no luck. Also, I’m not able to figure out how to give the sub-menus a border or some spacing from each other. How can I achieve this. I sure wish there were options for these in the Menu Module settings.

Thanks.
Jason

Hey Jason,

You should be able to do that by setting both the Link Color and Link Hover Color to the same value. We like to keep things simple here so those options are omitted. You can always use custom CSS though to achieve those. You can try the CSS snippet below and play around with it. You’ll want to add a class to your menu module so it only applies there. For instance, you place a class my-menu to your module. The CSS would be something like this.

.my-menu ul.sub-menu li a {
  padding: 20px;
  border-bottom: 1px #000 solid;
}

If you want that to apply to all menu modules you have, simply change my-menu to fl-module-menu.

Hope this helps!

Ben

Ben,

Thank you for your response.

The Link Color and Link Hover Color both set the main menu and sub-menu colors. What I want is to set the sub-menu text color to be different. I would like to set the sub-menu color to black for the normal, hover, and active state. Is this possible from the menu module settings?

screenshot

The CSS code worked great.

Thanks,
Jason

Hey Jason,

Gotcha. Try using the CSS snippet below.

/* Change sub-menu font color */
.my-menu ul.sub-menu li a {
  color: #000;
}
/* Change sub-menu hover color */
.my-menu ul.sub-menu li a:hover {
  color: #000;
}

Ben

Thanks Ben.

No worries! Enjoy BB! :slight_smile:

Ben