Opening Mega Menu in a ‘Lightbox’

Call 01323 872296

Opening Mega Menu in a ‘Lightbox’

Opening Mega Menu in a ‘Lightbox’.

There is a bit of a trend for the opening of mega menus in a ‘Lightbox’ type effect.

This is easy to do with SellerDeck.

1. Paste this into your css:

#mm-nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 211;
display: none

2. In responsive outer layout just before

<div class="navigation-bar">


#mm-nav-overlay {
background-color: #000000;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60.00000238418579)";
$(document).ready(function() {
$("#mega-menu").mouseenter(function() {
}).mouseleave(function () {

Open the Mega Menu layout and at the end, just after

 </div><div style="clear:left"></div> 


<div style="display:none;" id="mm-nav-overlay"></div>


Here it is in a responsive Sellerdeck website I designed for Kool Kingdom:

Mega menu opening in lightbox on Kool Kingdom's Sellerdeck website


Keep in touch and share

Graphicz on Social Media

01323 872296. 07836 551000.

Website by Graphicz