WordPress.org

Ready to get started?Download WordPress

Forums

Z-index: Drop down menu behind NextGEN thumbnails (7 posts)

  1. Saving Time
    Member
    Posted 1 year ago #

    I have a fly-out menu under one of the menu items on my header menu. When you mouse over it while on a page with NextGEN gallery, the fly-out menu will go behind the NextGEN gallery thumbnails.

    I've done quite a bit of research on this to no avail. I am extremely new at this, so I don't know how to make my way around CSS files.

    I am using the free Black and White theme by H&H color lab. I am aware of this fix from other threads:

    #suckerfishnav { position:relative; z-index:20; }

    However, my theme seems to have a different syntax for its menus (see below).

    I've changed all of the z-indexes in this part of the code in my style.css sheet, and nothing helped:

    }
    #sf-menu {
    	position: relative;
    	z-index: 100001;
    }
    #sf-menu {
    	font-family: 'Droid Serif', arial, serif;
    	width: 200px;
    	padding-left: 15px;
    }
    #sf-menu ul {
    	width: 200px;
    	padding: 10px 0;
    }
    #sf-menu ul li {
    	position: relative;
    	list-style: none;
    	padding: 12px 0 12px 10px;
    	background: url('images/navdivider.png') no-repeat bottom center;
    }
    #sf-menu ul li {
    	display: block;
    }
    #sf-menu ul li ul {
    	position: absolute;
    	margin: -44px 0 0 200px;
    	width: 18em;
    	/*background-color: #000000;*/
    	background-color: #FFFFFF;
    	border-color: transparent;
    	z-index: 99999;
    	padding: 15px 0 0;
    }
    #sf-menu ul li a {
    	text-transform: uppercase;
    	border: none;
    	font-size: 14px;
    	/*color: #ffffff;*/
    	color:#000000;
    	display: block;
    	z-index: 300;
    }
    #sf-menu ul li a:hover {
    	/*color: #c3c2c2;*/
    
    }
    #sf-menu ul li a:active {
    	outline: none;
    	color:#0066FF;
    }
    #sf-menu ul li ul li {
    	padding: 0 0 16px 20px;
    	border: none;
    	background: none;
    	margin: 0;
    }
    #sf-menu ul li ul li a {
    	/*color: #ffffff;*/
    	color:#999999;
    	font-size:12px;
    }
    #sf-menu ul li ul li a:hover {
    	/*color: #c2c3c3;*/
    	color:#000000;
    }
    #sf-menu ul li ul li ul {
    	position: absolute;
    	margin: -1px 0 0 195px;
    }
    .navigation {
    	text-transform: uppercase;
    	z-index: 200;
    	display: none;
    }
    .navigation ul.menu {
    	z-index: 200;
    }
    .navigation ul.menu li {
    	list-style: none;
    }
    .navigation ul.menu li a {
    	font-size: 24px;
    	line-height: 30px;
    	color: #fff;
    	text-decoration: none;
    	padding: 3px 10px 0 10px;
    	margin-bottom: 5px;
    	background: #000;
    	float: left;
    	clear: both;
    	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
    .navigation ul.menu li ul {
    	float: left;
    	display: none;
    	z-index: 200;
    }
    .navigation ul.menu li ul li {
    	margin: 0px 0px 0px 0px;
    	float: left;
    }
    .navigation ul.menu li ul li a {
    	font-size: 18px;
    	color: #424242;
    	margin-left: -2px;
    	line-height: 30px;
    	background: #fff;
    	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
    .navigation ul.menu li ul li a:hover {
    	color: #000000;
    }
    .navigation ul.menu li ul li ul {
    	margin: 48px 0px 0px 0px;
    	position: absolute;
    	display: none;
    	width: 100%;
    	z-index: 200;
    }
    .navigation ul.menu li ul li ul li {
    	margin: -15px 0 0 -2px;
    	white-space: nowrap;
    	float: left;
    }
    .navigation ul.menu li ul li ul li a {
    	margin: 0px 0px 0px 0px;
    }
    
    .navigation ul.menu li ul li ul li ul {
    	display: none !important;
    }
  2. Andrew Bartel
    Member
    Posted 1 year ago #

    What's your site?

  3. Saving Time
    Member
    Posted 1 year ago #

    Mouse the cursor over "gallery" at http://laytonlamsam.com/landscape/

    You will see that the fly-out menu is underneath the NEXTGen thumbnails.

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    The last comment here should resolve your issue, that being the position absolute or relative CSS (within the container that has the gallery/slideshow/image):

    http://wordpress.org/support/topic/nextgen-gallery-and-multi-level-navigation?replies=7

    Use Firebug or other web inspect tool...

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Make sure that any element that has a z-index also has a position attribute -- it won't work otherwise.

    http://www.w3schools.com/cssref/pr_pos_z-index.asp

  6. Saving Time
    Member
    Posted 1 year ago #

    So are you saying that if I add position: relative; above z-index when I see it, then it will work?

    Also, should I be editing the sf-menu items or the navigation items? I don't know the difference.

  7. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    The container..<div> css here <div> the misbehavior here </div> </div>

Topic Closed

This topic has been closed to new replies.

About this Topic