diff --git a/frontend/src/metabase/components/OnClickOutsideWrapper.jsx b/frontend/src/metabase/components/OnClickOutsideWrapper.jsx
index 7a972d73ec8c0bee92630b34eb954b946b2291bf..5c5ccdd4a5bbcc224f6b2f1143303201ec07c326 100644
--- a/frontend/src/metabase/components/OnClickOutsideWrapper.jsx
+++ b/frontend/src/metabase/components/OnClickOutsideWrapper.jsx
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from "react";
-import ReactDOM from "react-dom";
+import { findDOMNode } from "react-dom";
 
 // keep track of the order popovers were opened so we only close the last one when clicked outside
 const popoverStack = [];
@@ -21,9 +21,10 @@ export default class OnClickOutsideWrapper extends Component {
         this._timeout = setTimeout(() => {
             popoverStack.push(this);
 
-            // HACK: set the z-index of the parent element to ensure it"s always on top
-            // NOTE: this actually doesn"t seem to be working correctly for popovers since PopoverBody creates a stacking context
-            ReactDOM.findDOMNode(this).parentNode.style.zIndex = popoverStack.length + 2; // HACK: add 2 to ensure it"s in front of main and nav elements
+            // HACK: set the z-index of the parent element to ensure it's always on top
+            // NOTE: this actually doesn"t seem to be working correctly for
+            // popovers since PopoverBody creates a stacking context
+            findDOMNode(this).parentNode.classList.add('zF');
 
             if (this.props.dismissOnEscape) {
                 document.addEventListener("keydown", this._handleKeyPress, false);
@@ -38,6 +39,7 @@ export default class OnClickOutsideWrapper extends Component {
         document.removeEventListener("keydown", this._handleKeyPress, false);
         window.removeEventListener("click", this._handleClick, true);
         clearTimeout(this._timeout);
+        findDOMNode(this).parentNode.classList.remove('zF');
 
         // remove from the stack after a delay, if it is removed through some other
         // means this will happen too early causing parent modal to close
@@ -50,7 +52,7 @@ export default class OnClickOutsideWrapper extends Component {
     }
 
     _handleClick = (e) => {
-        if (!ReactDOM.findDOMNode(this).contains(e.target)) {
+        if (!findDOMNode(this).contains(e.target)) {
             setTimeout(this._handleDismissal, 0);
         }
     }
diff --git a/frontend/src/metabase/css/components/modal.css b/frontend/src/metabase/css/components/modal.css
index ba111df10102426b27652f3c19f14f690d0e4c79..3ba7b2590a623b533f3afee6839c7c59d54ccd90 100644
--- a/frontend/src/metabase/css/components/modal.css
+++ b/frontend/src/metabase/css/components/modal.css
@@ -1,7 +1,3 @@
-.ModalContainer {
-    z-index: 3;
-}
-
 .Modal {
   margin: auto;
   width: 640px;
diff --git a/frontend/src/metabase/css/home.css b/frontend/src/metabase/css/home.css
index 4e301f009750f23d0f3afde5ba30955f0bb5028a..d99f32ca19fe929b5330e2846516020137b066eb 100644
--- a/frontend/src/metabase/css/home.css
+++ b/frontend/src/metabase/css/home.css
@@ -1,7 +1,3 @@
-.Nav {
-    z-index: 3;
-}
-
 .CheckBg {
     background-image: url('/app/components/icons/assets/header_rect.svg');
     background-repeat: repeat;
@@ -55,9 +51,7 @@
 .NavDropdown {
     position: relative;
 }
-.NavDropdown.open {
-    z-index: 100;
-}
+
 .NavDropdown .NavDropdown-content {
     display: none;
 }
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index 61170f1a24c71b975448ca7fd342a17864adb24b..db2831cca8323641fb8e2732cee9beb09035880f 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -106,7 +106,7 @@ export default class Navbar extends Component {
 
     renderMainNav() {
         return (
-            <nav className={cx("Nav CheckBg CheckBg-offset relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
+            <nav className={cx("CheckBg CheckBg-offset z4 relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
                 <ul className="pl4 pr1 flex align-center">
                     <li>
                         <Link to="/" data-metabase-event={"Navbar;Logo"} className="NavItem cursor-pointer text-white flex align-center my1 transition-background">
@@ -115,7 +115,11 @@ export default class Navbar extends Component {
                     </li>
                     <li className="pl3">
                         <DashboardsDropdown {...this.props}>
-                            <a data-metabase-event={"Navbar;Dashboard Dropdown;Toggle"} style={this.styles.navButton} className={cx("NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center transition-background", {"NavItem--selected": this.isActive("/dash/")})}>
+                            <a
+                                className={cx("NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center transition-background", {"NavItem--selected": this.isActive("/dash/")})}
+                                data-metabase-event={"Navbar;Dashboard Dropdown;Toggle"}
+                                style={this.styles.navButton}
+                            >
                                 <span className="NavDropdown-button-layer">
                                     Dashboards
                                     <Icon className="ml1" name={'chevrondown'} size={8}></Icon>