Can't override module css for Mega Menu in Zen theme

Question

I am a fresh convert to Drupal and still a novice overall. My problem seems simple, but I just can't figure it out.

I installed a Zen theme, then a Mega Menu module. I am in the process of styling the collapsing menu, so I wanted to copy the CSS from the module to my theme CSS file.

First: I copied the tb-megamenu.tpl.php to my theme in order to add the correct glyphicon. That worked just fine.

Second: I copied the default.css from the module to my css folder. It didn't override.

Third: I changed the name of that file to custom-megamenu-default.css (in case there was some conflict with the file being named "default", and tried to register it in the .info file. It still didn't override the css.

What am I missing?

Note: I have cleared the cache at each step, and I (in the very beginning) created a custom.css file that overrides just fine, without registering in the .info file. I believe Zen aggregates all the css files in the css folder automatically.

Edit: If it helps here is the address of the site I am using to learn Drupal: www.sandbox.thefinanceplanner.com

Answer 1

For something like this, I would suggest you first to unset the css file in the module with hook_css_alter. After that, you can use the css you added in the theme, you don't need two css files with the same info loaded.