The Navbar module comes with some pre-set icons for common uses. They're fixed to the menu item names.

If you want different icons, or, to add icons to custom menu items or menu items provided by 3rd party modules, what's the simplest way that makes these new icons appear on pages using both the admin and main themes?

There's an issue in the Navbar queue for 3rd party module maintainers wanting to support Navbar icons out of the box, but it's not intended for site builders.

enter image description here

The ideal answer would:

  • Work in both main and admin theme contexts without duplication (so, not just adding CSS to theme)
  • Not cause the icons to fall off if the wording of their menu item labels is changed - in many organisations CSS styling and site structure will be handled by different people and should be independent of each other (this currently happens to Navbar default icons)

You can try to create custom module and implement hook_navbar() - for new items and hook_navbar_alter() - for already created items. In this hooks you can set custom css classes for items and attach you custom css file.

check /navbar/navbar.api.php file.

Looks like links came from navbar_menu_navigation_links(), they already have css class navbar-icon-<item_title>. You create custom css file in you module and add in hook_init(). Example of css styles you can get from navbar/css/navbar.icons.css or even copy it to your file and change if needed or add css for new items.

| improve this answer | |
  • I did actually try using hook_navbar_alter() and I was half-way through writing a self-answer when I saw there was nothing (or at least, nothing I could see) relating to the ::before CSS used by icons in any of the existing contents of this data. If you can provide an example using this, that'd be a great answer! – user56reinstatemonica8 Mar 24 '16 at 14:45

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.