I have created a dropdown menu using smartmenus module, now I've got a design request asking me to add an image to each parent item. Here's the idea: enter image description here

My first approach was to try with Menu Items Extra and Simple menu icons but the images are not rendered. So I thought that this could be related to the menu module I've been working with so I tried with Superfish and Megamenu. But again it didn't work. I must say that Megamenu was the closest one but since it requires Font Awesome Icons I cannot use my designer's icons with this module.

My last try was to add a class to each parent menu link with Menu Link Attributes so I could add the images via CSS. The huge problem with this approach is that if I replace the parent menu item name with an image it will also appear on mobile making the menu to look massive.

Any ideas on how to add the images?

  • This is not a Drupal Problem, is this a pure CSS + HTML problem. Both, Menu Item Extras and Menu Link Attributes can be used for that, but no module will be able provide the design or responsive behavior for a custom theme out of the box. Since you've already made some progress with Menu Link Attributes, I'd suggest enhancing this solution with a CSS media query @media (max-width: 767px) { .my_custom_nav_icon_class { display: none; } } – Hudri Mar 29 at 7:30
  • @Hudri Thanks, I had the same idea but I was trying to find a different less cumbersome way, maybe with views or entity reference, not sure. Just exploring – Alberto Castillo Mar 29 at 14:22
  • Btw, to deactivate my class the media query I'm currently using is: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {.my_class_name { content: ''; height: 100% !important; }} – Alberto Castillo Mar 29 at 14:41

Your Answer

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

Browse other questions tagged or ask your own question.