Floating Navigation on top of Slider in Foodie Pro

In the comments section of Full width Soliloquy slider with Header floating on the top in Genesis tutorial, a user wrote:

I am trying to work a variation of this idea; I’m working with Foodie Pro and Revolution slider but trying to move the slider under a primary and secondary nav menu rather than the whole header.

I tried this code above, with a bit of adjustment, but the menus displayed below the slideshow.

Do I need to use custom menus instead and place them in a widget in the same wrap div as the slideshow? OR what would be the best way to do this?

This site is the inspiration for the look of the menu(s) over the slideshow. (obviously not a WP site)

http://www.goducks.com/SportSelect.dbml?DB_OEM_ID=500&SPID=11401&SPSID=94831&KEY=

Except I would want the header positioned above the menus and the slideshow. I fiddled with it to try and make it work, but could not get the menus to display over the slideshow (I used absolute positioning and played with the z-index), though they were in the right spot under the slides.

In Foodie Pro, header and navigation menus are inside .site-container by default.

In this tutorial we shall

• Reposition header so it is outside (above) .site-container
• Reposition Before Header widget area so it is above .site-header
• Remove the primary navigation menu
• Add opening markup for nav + slider on homepage
• Add the primary navigation menu above .site-container
• Reposition the secondary navigation menu
• Add closing markup for nav on homepage
• Display Revolution Slider on homepage
  Add closing markup for nav + slider on homepage
• Add necessary CSS to set absolute positioning for navigation relative to the home nav slider

Before:

After:

Step 1

Add the following in Foodie Pro's functions.php: