Merge pull request #4892 from gets0ul/issue-4294

Fix for Issue #4294 Dropdown hidden behind on profile settings page

Author: luizrrodrigues

__tests__/shared/components/Header/__snapshots__/index.jsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Default render 1`] = `
-<div>
+<div
+  className="src-shared-components-Header-___style__nav-header-wrapper___3oH9J"
+>
   <TopNav
     loggedIn={true}
     logo={

src/shared/components/Header/index.jsx

@@ -5,6 +5,8 @@ import { config } from 'topcoder-react-utils';
 import Logo from 'assets/images/tc-logo.svg';
 import { tracking } from '../../actions';
 
+import './style.scss';
+
 let TopNavRef;
 let LoginNavRef;
 
@@ -69,7 +71,7 @@ const Header = ({
 
   if (TopNavRef) {
     return (
-      <div>
+      <div styleName="nav-header-wrapper">
         <TopNavRef
           menu={headerMenu || config.HEADER_MENU}
           rightMenu={(

src/shared/components/Header/style.scss

@@ -0,0 +1,3 @@
+.nav-header-wrapper {
+  z-index: 2;
+}

src/shared/components/TopcoderFooter/style.scss

@@ -72,6 +72,7 @@
   font-weight: 400;
   line-height: 21px;
   position: relative;
+  z-index: 0;
 
   @include xs-to-sm {
     padding: 30px 30px 21px 30px;

src/shared/routes/Topcoder/styles.scss

@@ -8,6 +8,6 @@
     display: flex;
     flex: 1 0 auto;
     position: relative;
-    z-index: 0;
+    z-index: 1;
   }
 }