Superfish menu


Author Message
Linda

Posted: 12/8/2009
Quote message 

I'm having some issues with superfish submenu showing below the second left sidebox.
Here's my site.
https://saugeengolf.com/home

I've changed the z-indexes as described elsewhere in the superfish css as follows:
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
z-index: 1000;
}
.sf-menu li {
float: left;
position: relative;
z-index: 101;
}
.sf-menu a {
display: block;
position: relative;
z-index: 102;
}

I'm pretty sure I need to change something in the artisteer template but I'm not sure what. Any ideas on how I can get the submenu above the second sidebar box?

Thanks,
Linda
 
David

Posted: 12/9/2009
Quote message 

Linda,

I looked at your site but see that the left side submenu is already above the login form. In any case, the order of modules in the left column is controlled by the "order" field in Joomla's module screens.
 
Garry

Posted: 12/9/2009
Quote message 

I seen the issue on your site, there are two solutions, first is to move your sidebar down, second is to move your superfish submenus towards right.
 
Linda

Posted: 12/10/2009
Quote message 

My client does not want the menu below the login box. I do know how to move module positions but that is not the desired outcome.
Also, moving the submeus to the right will look odd and detached, so that isn't a good solution either.

I need to figure out a way to make the superfish menu z-index or the top box be on top of anything else. I'm sure it is a z-index, but I'm not sure what to set it on.

Maybe this is the main issue that is holding up vertical menus in Artisteer?

 
vickiwatson

Posted: 12/11/2009
Quote message 

Quote Linda:

I'm having some issues with superfish submenu showing below the second left sidebox.


Did you fix this? The menu is displaying fine for me in FF. I had the same problem with a site I did recently and finally gave up and used a horizontal menu. :(
 
David Johnson

Posted: 12/11/2009
Quote message 

Linda,

Just try setting z-index to 9999999 and see what happens. By using a very large number, you will be guaranteed that it will be greater than other z-index values used by artisteer.

I see you have added a z-index to your CSS:

.sf-menu, .sf-menu *
{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
z-index: 1000;
}

But it looks like you have moved your left column blocks (x-menu) to the right side. So I could not do any testing to see if your z-index works. The z-index may need to be put in another selector for the drop menu portion to show on top of other left column blocks. You may have to 'play' with the css or create another selector that is not currently in your CSS file for it to work properly.

If you don't already have it, I suggest you get "web developer" and "firebug", plugins for firefox. IE8 has a developer toolkit that performs similarly to firebug. Both of these tools will make it easier to isolate the correct selector for a z-index property.
 
GSWtech

Posted: 11/14/2010
Quote message 

Solution for Superfish menu and Artisteer (2.5) without using other solutions:
edit template.css of your generated temaplate and change:

edit:
.art-footer
{
...
position: relative;
overflow: visible;
...
}

In all of the .art-block* content change z-index:
z-index: 0; -> z-index: 10000;
z-index: 1; -> z-index: 10001;

Edit superfish-vertical.css:

add:
.sf-vertical, .sf-vertical li {
...
position: relative;
z-index: 999999;
}

.sf-vertical li:hover ul, .sf-vertical li.sfHover ul {
...
position: relative;
z-index: 999999;
}

If there will be other problems with the stack you should add or edit superfish.css and place there some z-index: 999999;

*The values 999999 10001 and 10000 are example values, that are giving the right effect, but they might be lower.
 
MrArtist

Posted: 11/28/2010
Quote message 

The above suggestion didn't work for me.

Found a much simpler solution thanks to the thread here:
http://forum.joomla.org/viewtopic.php?f=472&t=384450

Basically just add the following z-index entries to the superfish.css:

--------------------------------------------------------
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
z-index: 103;
}
.sf-menu li {
float: left;
position: relative;
z-index: 101;
}
.sf-menu a {
display: block;
position: relative;
z-index: 102;
---------------------------------------------

Hope that helps. Check the thread for some other suggestions.