Menu behind revolution slider

  • Hi there,

    I’ve been strolling around these and other fora to find a solution to this problem; but none of the presented solutions seem to work.

    Please help me fix this:

    on https://www.fotofonkeling.nl the submenu of the jquery vertical menu is positioned behind the slider.

    I tried giving the different slotholders for the slider a low z-index and the menu a high one, but nothing seems to work.

    Anyone out there with the magic touch? Any help is greatly appreciated.

Viewing 1 replies (of 1 total)
  • SideKick Dan

    (@shout-out-sidekick)

    Hello,

    I was playing with your css and seems like you have a complex issue. From what i can see you’ve got some conflicting styles in your main style sheet and the one that the css inspector calls “en”. Here are some things i found that might be causeing you issues. (it could be that in an attempt to style drop down menus you didn’t sufficiently isolate the changes to just that menu or something similar)

    First in your main style sheet around line 165 you have this code

    #nav ul ul{
	display:none;
	position:absolute;top:86px;left:0px;
	width:170px;
	background:#edebeb;
	z-index:100000;
	border-top:3px solid #a0ce4e;
	z-index: 99999;

}

    If you get rid of the display:none; and the width:170px your menu returns. this is causing it to disappear. Not the z-index. Also, there’s two declarations of z-index, one can be removed.

    Second, in this ‘en’ stylesheet that’s being generated perhaps by wpml you see this code about line 1487

    `#nav ul ul{
    width:170px !important;
    }
    #nav ul ul li:hover ul{
    left:170px !important;
    }`

    Get rid of the 170px width declaration. this should bring back the menu.

    Then in your main style sheet around line 136 notice this code and add a width and position property as so

    nav#nav{
	float:right;
	font:14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
	z-index: 99999;
	position: relative;
	width: 100%;
        margin-top: -86px !important;
}

    This should at least get you back on track to play with your menu again. Seems like there’s a lot of menu items in your main menu too. First step is to eliminate your main issues as the above code should help with. Without seeing the backend of the admin and settings, it could be some settings there cuasing the above code to get changed. Hope it helps ??

    (As a side tip, for this reason, i’d say that when picking a template to start with, it is best to look for one based on stability and cleanness of code rather than on style – with css any stable theme can be morphed into what you need. especially is this the case with mobile responsive designs. Sometimes when choosing themes, persons look more for one to fit their particular business , ex ‘i need a photography template’ or ‘is there a template for pizza places’, but in reality it’s best to start with finding a template that is just coded well and works great on all browsers and devices, then just style it to fit any type of business.)

    Let me know if the code help. Definitely fun for me to find one that gets my mind working. I love css puzzles ??

    Danny ??

Viewing 1 replies (of 1 total)
  • The topic ‘Menu behind revolution slider’ is closed to new replies.