Keyword

[HOW TO] My suckerfish menu expands behind flash objects or image rotators!

  • Fotis
  • Fotis's Avatar Topic Author
  • Offline
  • Administrator
  • JoomlaWorks Support Team
More
12 years 4 months ago - 6 years 11 months ago #4003 by Fotis
Fotis created the topic: [HOW TO] My suckerfish menu expands behind flash objects or image rotators!
It's really a common template problem...

All suckerfish (or others like Supersucker, Transmenu etc.) dropdown menus should be included inside a container div to bypass such issues, mainly for compatibility with flash banners, javascript rotators which use relative positioning etc. But most template developers forget that.

So, here's what you can do.
You need to add a container div that wraps your menu. Open your template's index.php file and look for the place where the menu is called. It should be something like:
<div id="nav">***menu code here***</div>

So, add a "wrapper" div, like so:
<div id="menu-container"><div id="nav">***menu code here***</div></div>

And then in your template's CSS file (template_css.css), add the following code snippet:
#menu-container {position:relative;z-index:99;}

This should fix any issues.  ;)

If you use & love K2, please take a moment to add your review and rate it
at the Joomla Extensions Directory: extensions.joomla.org/extension/k2/


IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

Please Log in or Create an account to join the conversation.

More
10 years 10 months ago #4005 by Effezien
Effezien replied the topic: Re: My suckerfish (or other) menu expands behind flash objects or image rotators
Hi all,  :)

I would like to write this in the forum, maybe this will help anyone :

I have a website with Joomla! 1.5.8 & the ja_purity template.
I had the same issue with the menu and i changed the following in the ja-sosdmenu.css file from this template:
/*--------------------------- VISUAL ----------------------------*/
/* -------- All levels -------- */
#ja-mainnavwrap {
	border-top: 1px solid #666666;
	background: #444444;
	position:relative;z-index:99;
}

Around line 69 you need to add the
position:relative;z-index:99;
line just before the closure tag }

I checked this with IE7 & Firefox, IE7 had the same issue, so i assume this will fix it aswell in IE6. Can anyone check this in IE6 maybe ?

Greets,
Sven

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum