How to Create a New Menu Theme?
Mega Menu Theme
- Copy and rename default folder from and into modules/mod_djmegamenu/themes
- Switch mega menu theme to {YOURTHEME} in the module settings (Mega Menu Options tab)
- Find "-default" suffix and replace it with "-{YOURTHEME}" for all css selectors in both css files
- Adjust styles of your new mega menu theme
Creating a new mega menu theme is very simple. At the beginning you just need to copy and rename default folder from and into modules/mod_djmegamenu/themes. Your new theme will be listed right away in the module settings where you can switch the theme to the newly created one.
The next step is to replace a suffix (theme name) of all css selectors in the {YOURTHEME}/css/djmegamenu.css and {YOURTHEME}/css/djmegamenu_rtl.css files. You can use any text editor with "find & replace" feature to accomplish this step in seconds (e.g. Notepad++, WordPad, etc.).
Now you are ready to make the changes you want in the {YOURTHEME}/css/djmegamenu.css file and optionally also in the {YOURTHEME}/css/djmegamenu_rtl.css file depends on what is the direction of your site language. The djmegamenu_rtl.css file is loaded only for RTL languages together with djmegamenu.css what means it should contain styles' overrides for RTL languages. It's optional, so you can delete it from your theme and then only the djmegamenu.css file will be used for both language directions.
Theme Overridden in the Template
Alternatively you can customise mega menu in your template. You can copy from the default theme the djmegamenu.css file into templates/{YOURTEMPLATE}/css folder and set the mega menu theme to "- override from template -". In this case you need to replace "-default" suffix with "-override" for all css selectors. The same rule with the djmegamenu_rtl.css file applied here. It will be loaded for RTL languages only if it exists in your template css folder.
Mobile Menu Theme (Select, Accordion, Offcanvas)
- Copy and rename light or dark folder from and into modules/mod_djmegamenu/mobilethemes
- Switch mobile menu theme to {YOURTHEME} in the module settings (Mobile Menu Options tab)
- Find "-light" (or "-dark") suffix and replace it with "-{YOURTHEME}" for all css selectors in both css files
- Adjust styles of your new mobile menu theme
Mobile menu provides two default themes: light and dark. Analogically to the mega menu theme you are able to create your own theme for mobile menu in the modules/mod_djmegamenu/mobilethemes folder. Just copy one of the default themes and rename the folder name. Your new theme will be listed right away in the module settings where you can switch the theme to the newly created one.
The next step is to replace a suffix (theme name) of all css selectors in the {YOURTHEME}/css/djmobilemenu.css and {YOURTHEME}/css/djmobilemenu_rtl.css files. You can use any text editor with "find & replace" feature to accomplish this step in seconds (e.g. Notepad++, WordPad, etc.).
Now you can change the styles in the {YOURTHEME}/css/djmobilemenu.css file and optionally also in the {YOURTHEME}/css/djmobilemenu_rtl.css file depends on what is the direction of your site language. The djmobilemenu_rtl.css file is loaded only for RTL languages together with djmobilemenu.css what means it should contain styles' overrides for RTL languages. It's optional, so you can delete it from your theme and then only the djmobilemenu.css file will be used for both language directions.
Theme Overridden in the Template
Alternatively you can customise mobile menu in your template. You can copy from one of default themes the djmobilemenu.css file into templates/{YOURTEMPLATE}/css folder and set the mobile menu theme to "- override from template -". In this case you need to replace "-light" (or "-dark") suffix with "-override" for all css selectors. The same rule with the djmobilemenu_rtl.css file applied here. It will be loaded for RTL languages only if it exists in your template css folder.