1

Can anyone advise on the best way to style your superfish menu when using latest version of zen and sass? I am currently styling my responsive theme using the sass files which regenerate the css, which is going great, but superfish comes with its own set of css files which are located sites/all/libraries/superfish/style/css.

I ideally want to use sass to style it from my sass folder (under theme root) so its all consistent, so I dont have to keep changing into the supefish folder changing css directly.

Any ideas?

Improve this question

1 Answer 1

Reset to default
1

The latest version of Zen is organized according to the SMACSS way. However, what SMACCS calls modules is called components in Zen. This to avoid confusion, since Drupal already has a definition for 'modules'. SMACSS defines modules (or components in Zen) as follows:

..Module is a more discrete component of the page. It is your navigation bars and your carousels and your dialogs and your widgets and so on...source

All SASS code concerning components is stored therefore in your_zen_subtheme/sass/components/_misc.scss file. I would choose to add style rules for your Superfish menu there. You can use the Superfish classes (with the .sf prefix) to target only the Superfish menu instead of all menus.

Improve this answer
1
  • You don't have to add many CSS changes to override the super fish entries. As Sydney says, Zen 5 uses SMACSS to provide a modular organization. I would add a _navbar.scss module (component) rather than edit _misc.scss . In fact, the new Zen6 has been refactored to be much more modular, following the Drupal 8 SMACSS best practices.
    – Tom Stermitz
    Dec 1, 2014 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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