For Theme Designers – Style Mega Menu From Your Theme

Mega Menu 3.0 offers unparalleled flexibility for complete control over navigation styling for visual cohesiveness. This section is tailored for theme designers and agencies looking to seamlessly blend their creative vision with Mega Menu's powerful features.

While previous sections covered minor adjustments and custom skins, this approach allows for full control over every element, perfect for matching your unique theme design without exposing easily breakable CSS to non-technical clients.

A Strong Foundation

The base.css file is automatically loaded to ensure Mega Menu’s minimum core functionality and styling remain intact. This allows you to focus on design rather than functionality. Advanced designers are welcome to override core functionality; however, future updates to the Mega Menu block may require modifications to your code to support new features.

It is highly recommended to test your custom skin on a development installation of Concrete CMS before and after upgrading the add-on in the future.

Familiarize Yourself With Modern Skins

Explore the Modern skin CSS files located in /packages/jb_megamenu/blocks/jb_megamenu/build/css_manual/skins/modern to get familiar with the conventions and code structure used. You have full control over your custom skin, and do not have to follow any particular design and coding methods; however, avoid reinventing the wheel to save time.

Starting Points

To get you up and running quicker, use one of these approaches:

Method 1) Copy a Modern Skin

This is the quickest and easiest method.

Find a modern skin that loosely matches your design goals. From the Skin Type field choose “Modern” and then click the Customize selected skin button to reveal a new section. Click the Copy and customize CSS button to make a copy of the selected skin’s CSS code and place it inside the Custom CSS field (as well as change the Skin Type field to “Custom” automatically).

Select all the CSS code, then copy and paste it into your theme’s CSS file.

Replace line 1 of the code from:

With:

Method 2) Copy the Skeleton CSS Code

This gives you the most flexibility but also requires more work.

From the Skin Type field, choose “Custom”, and the Custom CSS field is revealed. This initially provides a skeleton CSS code for styling the menu. If you’ve already customized it, the field can be reset by clicking the red Reset to default CSS button.

Select all the CSS code, then copy and paste it into your theme’s CSS file.

Replace line 2 of the code from:

With:

Activate Your Custom CSS

To make your theme option active, navigate the Mega Menu block to Color > Skin > Skin Type and select “Let my active theme decide”.

Skin Coding Essentials

There are only 2 essential requirements to activate your custom CSS within your theme:

1. Use the html:root .my-theme CSS selector for overriding global variables; and
2. Most of your other CSS selectors should start with .jbmm.my-theme.

This ensures your custom code has increased specificity over the base.css and takes precedence. And if the user switches to another Skin Type, your custom CSS won’t take effect.

To facilitate this, a CSS class is automatically added to the top-level <NAV> element based on the Skin Type value:

• Let my active theme decide: my-theme
• Custom: custom-skin
• Modern: (name of Modern skin, hyphenated)
• Make My Own Style: myo-style
• Flat: standard-flat
• Glossy: standard-glossy

Skin & Theme Coding Best Practices

Ensure the element surrounding the Mega Menu (typically the “Navigation” editable area) does not have a fixed height (better to use min-height for improved responsive support), and does not overflow: hidden; (otherwise drop-down menus may be obscured).

Use responsive design in your theme, and allow the element surrounding your Mega Menu to adjust to the browser screen width. The Mega Menu can only stretch horizontally as far as your theme will allow. Building your theme on Bootstrap (or a similar framework) is recommended to ensure full responsiveness.

Add Dark mode support to all elements of your theme. Mega Menu already has support built in, but if you’re creating a custom skin, you’ll need to add light/dark styling for each relevant element. By duplicating a Modern skin as a starting point (Method 1, above), this is already done for you.

Supporting Core Concrete Features

If you choose to use Font Awesome icons in your Mega Menu, your theme must include these. They are not automatically loaded in Mega Menu for performance reasons. If your custom theme is built on Bedrock, then the Font Awesome asset is automatically included. To add the required asset in your custom theme, open the page_theme.php file within your theme and look for the registerAssets() function and add call the relevant requireAsset(). Here's an example from the bundled Elemental theme.