Your portfolio is your best sales pitch. This is why you shouldn’t hide it behind a plain “Work” link. In this guide, we’ll build a Portfolio Mega Menu in Elementor using ElementsKit, complete with preview images, custom buttons, and clean card layouts that let visitors browse your work before they even click.
A portfolio site’s biggest job is showing off the work fast; nobody wants to click through five pages to see a project. If your mega menu shows preview images right in the dropdown, visitors can spot what they like and jump straight to it.
Let’s learn how to build a portfolio mega menu with preview images in Elementor using ElementsKit:
✅ Activate the Mega Menu and Nav Menu modules
✅ Plan your menu structure around your portfolio categories or projects
✅ Turn on the mega menu option for your main menu items
✅ Add project preview thumbnails to the dropdown using the Image widget and Grid layout
✅ Link each preview image to its corresponding project page
✅ Fine-tune hover effects and spacing so it looks polished
✅ Test across devices, then publish
Fit Check, Requirements, and Exit Signs
| You’re the right reader if | You should have | Stop reading if |
|---|---|---|
| You manage a WordPress site for a creative agency, freelance studio, or SaaS product that showcases project work | Working familiarity with Elementor’s panel and widget system. ElementsKit Lite is already installed. | Your nav menu is built entirely in a theme’s proprietary header builder (like Astra or Divi) without Elementor in the loop. ElementsKit’s mega menu module only works with Elementor-rendered headers, not theme-native ones. |
| Your current flat navigation fails to communicate the breadth of what you do before a visitor even clicks anything | An understanding of what a Custom Post Type is (even if you don’t build them yourself) | Your host enforces a memory limit below 256MB (mega menus with image loading regularly push Elementor’s editor past 128MB during build sessions) |
Core Setup Steps
Let’s start the main steps.
Step 1: Enable the Required ElementsKit Modules
- Go to ElementsKit → Modules
- Turn on both Header Footer Builder and Mega Menu modules
- Click Save to apply changes
Sep 2: Set Up Your WordPress Menu
- Go to Appearance > Menus
- Create a new menu, or edit your existing main navigation
For a portfolio site, top-level items typically include: Home, Services, Work, Blog, Contact, etc. Add only these top-level labels for now, don’t add sub-items yet; that comes later.
Don’t forget to assign the menu to the header. Then save your changes.
Step 3: Turn On Mega Menu for Your Menu Item
- Hover over the menu item where you want the mega menu (e.g., “Work”)
- Click the Mega Menu option that appears
- Enable ElementsKit Mega Menu directly from that menu item’s settings
A popup window will open where you can:
- Toggle Enable Mega Menu on
- Click Edit Mega Menu Content
- Save your changes
Right beside the content tab, you’ll also find quick settings to add icons, badges, or adjust other mega menu options.
Step 4: Design Your SaaS Mega Menu Layout
Clicking Edit Mega Menu Content opens the Elementor editor, where you have two options:
Method 1: Use a Ready-Made ElementsKit Template
To save your time and a effortless process, you can pick an ElementsKit pre-built mega menu template. You can also customize it later to match your Portfolio product.
Let’s highlight works of someone’s portfolio inside the mega menu. Once the mega menu is enabled for that menu item and a template is selected, here’s how to customize it:
Customizing the Template
Most templates come pre-loaded with widgets like Icon Box, Page List, Heading, Image, and similar elements. All of them offer Content and Style tabs. These settings give you full control over how everything looks and functions.
Here’s what the Icon Box widget’s Content tab lets you control:
- Icon Box: Sets the main content like icon, title, description, and layout of the card.
- Read More section: Controls the button like text, link, and icon.
- Settings: Controls layout details like icon position, alignment, and heading tag.
- Badge: Adds a small label (like “Exclusive”) on the card, with position control.
Style the ElementsKit mega manu template for a portfolio website.
- Icon Box Container: Controls the whole card’s background, border, shadow, and padding.
- Content: Sets the title and description’s font size, color, and spacing.
- Button: Controls the button’s color, border, padding, and width, this is also where you’d fix the “SEE APPS” button size issue.
- Background Overlay: Adds a color/image overlay on the whole card, with hover effect options too.
Setting Up Your Site Header
Before your mega menu can go live, you need a header in place to hold it. Here’s how:
- Go to ElementsKit → Header Footer
- Click to create a new header
- Open it in Elementor to start editing
For detailed header-building steps, check the Header & Footer Builder documentation.
Once your header is open in Elementor, find the ElementsKit Nav Menu widget and drag it into your layout.
Then, pick your mega menu from the dropdown so it connects to your WordPress header.
You’ll also see extra customization options, such as:
- Horizontal menu position
- Dropdown open as
- Dropdown indicator icon
- Enable one page
- Responsive breakpoint
Adjust these as needed for your site. For visual tweaks, head over to the Style tab to fine-tune how the nav menu looks.
Method 2: Make a Portfolio Website Mega Menu from Scratch
This option is for those who like to explore things on their own, mixing and matching widgets, modules, and elements to build a mega menu that fits their portfolio site perfectly.
For example, here we used the Heading, Page List, and Image widgets to design another mega menu layout. And the best part? Every widget comes with all the customization controls you need, right at your fingertips, no extra hassle.
Now let’s check the live result. Click the header preview option to see how your customized portfolio mega menu with advanced property search filters looks and performs on the site.
Common Mistakes to Avoid
- Don’t design the Elementor layout before setting up the menu in Appearance → Menus. Otherwise it won’t show up anywhere.
- Don’t use full-size images. Compress them first. Tools like Squoosh get thumbnails under 40KB. Otherwise your mega menu will load slow.
- Don’t overload each column with too many widget types. Stick to 2–3 max so the panel opens fast.
Edge Cases to Watch For
- Using Elementor’s Flexbox Container? Set mega menu width to “Custom.” Match your header’s max-width. Adjust with a negative margin if it’s misaligned.
- More than 6 portfolio categories? Split into a two-row grid instead of cramming everything into one row.
- Using WPML or Polylang? Set up the mega menu separately for each language. It doesn’t auto-translate.
Informative: Build a SaaS Website Mega Menu with Use-Case Sections in Elementor
When to Call in a Developer
✓ Mega menu still not showing after correct setup, cleared cache, and no plugin conflicts. Likely a deeper theme or plugin conflict.
✓ Need to show different menu content by user role (membership sites). ElementsKit doesn’t support this natively.
✓ PageSpeed score drops after adding the mega menu. A developer can load ElementsKit assets only on pages that need them.
Standards to Check Against
- ElementsKit’s official docs. UI changes a lot between versions, so check yours.
- Google’s Core Web Vitals (INP). Aim under 200ms for menu interactions.
- Elementor’s compatibility notes. Stick to stable releases, not RC builds.
- WCAG 2.1 keyboard accessibility. Test with NVDA or Chrome if accessibility matters for your project.
Leave a Reply