Sub menu being cutoff by slideshow


(Jason Bostick) #1

Hi, I’m curious how to fix this issue of my sub-menu being cutoff by a slideshow. A Preview screenshot is attached along with the edit mode view. You’ll see the ‘Maintenance’ title is cut off by/hidden behind the image


(Stuart) #2

Almost certainly a Z-index issue with the menu. Increase the z-index value until the problem goes away. If the menu has that option of course. If it doesn’t then we’ll need a link to see it happening so we can prescribe something specific.


(Joe Workman) #3

Why are you using a Reflow stack in Foundation? I would suggest that you stick with Foundation column stacks IMHO.

@kryten is correct. Its a z-index issue. MovingBox uses a high z-index when using the fade option. The following should fix it…

.top-bar-section .dropdown{
	z-index:1999!important;
}

(Jason Bostick) #4

Thanks Joe.

I generally try to stick to Foundation stuff. I’m essentially only using it in this instance for the ability to center the left column vertically. I tried a few different setups with Target at first but I couldn’t get it to work properly (the extra columns are remnants from my Target experiments). I need to set aside time to figure it out and watch your videos (same goes for Jack).

For what it’s worth, @joeworkman, this is what I had setup with Target. I tried a few different Target locations, % vs ‘Centered’, etc. I’m sure it’s something easy but I couldn’t get it to center…

I also see @tav just responded with a BWD suggestion so that would work as well. Lots of stuff to figure out! Go easy on me :slight_smile:


(Andrew Tavernor) #5

You can vertically center any Foundation columns using the Vertigrum stack.
http://www.bigwhiteduck.com/stacks/vertigrum/

Grummage 2col also has vertical centering built in and is a native Foundation column.
http://www.bigwhiteduck.com/stacks/grummage/


(Jason Bostick) #6

Aside from the vertically centering trick, this also fixed the sub-menu issue (without requiring Joe’s code). Thanks!