Pure CSS Mega Menu

[mydanilo]

I would like to modify the mega menu to have a few simple (maybe hard coded) links without drop down. I have some Ezpages that need to be top level links. For example I would like to add an FAQ link.
Sterling Grand has now: Home - Shop - Brands - Info - Contact
I want to add to top level: Home - Shop - Brands - Info - Contact - FAQ

As a second step I'd like to add more top level links and could do without the search box so I have space for more links.

Is there a simple way to achieve this as there are no drop downs involved?

To answer my own question. I found it in Sterling Grand thread:
in tpl_mega_menu.php wherever the link needs to go.

<li><a href="your url here">your link name here</a></li> 

[toomanyknots]

How would I go about disabling the menu for mobile devices? I am at a loss, I read somewhere in this thread someone was doing it with @media but I have no idea how to do that. My site uses twitter bootstrap I believe. You can check it out at www.oldworldarchery.com

[jsarwar]

instead of showing all categories in one drop down/column can we show in multiple drop down/columns using mega menu like horizontal dropdown?

[sungmo]

I'm having a problem with IE.
I have an iframe in the "Location" dropdown div on the menu and when I mouseover it in IE it closes the Location tab. It does not do this in other browsers and works properly.

below is that code

can someone help me?

thanks

/*bof customer service*/
define('HEADER_TITLE_LOCATION','Location');
define('TITLE_LOCATION','Dr suite, TX');
define('TEXT_CONFIDENCE','<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3348.576771873294!2d-96.62542988528068!3d32.935778483181444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3 m3!1m2!1s0x864c1da7b650fa0f%3A0x1e0930eb331249d!2s2376+Dr+%23106A%2C+TX+!5e0!3m2 !1sen!2sus!4v1462900552387" width="550" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>');

[gareththomasnz]

Hi folks - very nice menu & it works fine

However I want my site to have an Amazon like look & the Amazon Mega Menu has a white background and displays a dark lightbox effect covering everything except the menu & header

I wonder does anybody have the CSS code to do this?

I assume its a Z-layer with opacity & layer is a depth below the header & menu which displays on hover?

I would like to get it working this afternoon fingers crossed

[gareththomasnz]

Hi folks - very nice menu & it works fine

However I want my site to have an Amazon like look & the Amazon Mega Menu has a white background and displays a dark lightbox effect covering everything except the menu & header

I wonder does anybody have the CSS code to do this?

I assume its a Z-layer with opacity & layer is a depth below the header & menu which displays on hover?

I would like to get it working this afternoon fingers crossed

Heres my additional CSS:

/*LightBox Effect*/

.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}

[gareththomasnz]

Not working yet

I added the following to tpl_mega_menu.php

<div id="mega-wrapper" "javascript:void(0)" onclick = "document.getElementsByClassName('mega-menu').style.display='block';document.getElementById('fade').style.display='block';"><!-- bof mega-wrapper -->

    <ul class="mega-menu menu_red" "javascript:void(0)" onclick = "getElementsByClassName('mega-menu').style.display='none';document.getElementById('fade').style.display='none';"><!-- bof mega-menu -->

And the following line to tpl_header.php

		  <div id="fade" class="black_overlay"></div>

After the code that adds the mega menu

If anybody has suggestions? obviously it must work on hover not click but I want to get it at least to display at all for a start