0

I'm attempting to custom style the TB-Megamenu because there are a lot of color changes I would like to make. I would also like to change how when the mouse leaves an item it stays that color for a moment before changing back to it's default state. I understand that I can always change the css in a custom stylesheet that's also included like

#main-menu-wrapper .tb-megamenu .mega-nav > .active a, #main-menu-wrapper .tb-megamenu .dropdown-menu .mega-nav > .active a {
    background-color: #000;
    color: #fff;
}

But hunting down everything I need to change is quite the task. Especially when trying to hunt down what selections I need to make for things elements are active, or elements that the mouse just left. The fact that the TB-Megamenu is changing the classes also makes it difficult. At the same time the TB-Megamenu is being used elsewhere, and I'd like to keep the default style for them, without affecting other sites that are on the same instance of drupal. Is there a better way to accomplish this? Or do I need to continue trying to search and override each element?

1

TB Mega Menu module has a CSS folder. Use that as your reference. It also has a styles sub-folder that IMO would be of greatest benefit. Just copy one of the whole styles/*.css files over and adapt it. No need to hunt it down.

To target a menu on a specific page you will need to inject a CSS class into that page via a preprocess_page hook or Context or some other preferred method. You need to set it closer to root level (ie html or body tag) than that of .tb-megamenu class occurence in the html. Having done that all you need do is prepend your injected class to every single selector that you use, as in:

.tb-megamenu.style-black .nav > li > a:focus,
.tb-megamenu.style-black .nav > li > a:hover {
  background-color: #222;
  color: #7bb9e0;
}

becomes:

.my-page-class .tb-megamenu.style-black .nav > li > a:focus,
.my-page-class .tb-megamenu.style-black .nav > li > a:hover {
  background-color: #222;
  color: #7bb9e0;
}
| improve this answer | |
  • This looks like a good route to go. Also I see that there are 3 different style selections in the Megamenu config (Black, Blue, and Green) that correspond to 3 css files in the module folder. Is there a way to add a style to that list? I tried just putting my own stylesheet in there. But it wasn't added to the list. – Matt Apr 25 '16 at 16:04
  • You will have to hack it a bit: Look at line 478 of tb_megamenu.functions.inc Then for the style sheet you will rename it and do a replace inside for the color word – J. Reynolds Apr 25 '16 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.