hanhsien

Jacob,

Thanks so much! I’m still pretty new to this, so really appreciate your help!

I’ve managed to target the individual navigation tabs, but they’re not stacking up with the z-index property. Can you see what I’m missing?

div.anythingSlider .thumbNav li a {
	font: 21px/28px Georgia, Serif;
	color: white;
	background: transparent;
	display: inline-block;
	text-decoration: none;
	padding: 2px 8px;
	height: 28px;
	background-image: url(https://jobs.otak2.com/wp-content/uploads/2012/03/nav_light_bg.png);
	text-align: center;
	outline: 0;
	border-radius: 0px 0px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius 5px 5px 0 0;
}

div.anythingSlider .thumbNav li a.panel1 {
	z-index: 10;
	color: green;
	width: 146px;
	margin: 0 -22px 0 0;
}

div.anythingSlider .thumbNav li a.panel2 {
	color: blue;
	left: 150px;
	width: 146px;
	z-index: 7;
	margin: 0 22px 0 0;
}

So with some not-very-elegant CSS manipulations, I’ve managed to get the look I was going for, almost.

I want to use z-index to stack the tabs on top of one another in the order I want. I also want to specify different styles for my last tab (to close the menu bar). How do I define the properties, position and z-index for a specific tab? Thanks!

Link to my site:
https://jobs.otak2.com/

I’ve read the code snippets on doing this using the “appendControlsTo” option, but I’m not sure how to make this work with the WordPress shortcode.