From 2756a5836facf076c2a6fcfcde02db44a5efc710 Mon Sep 17 00:00:00 2001
From: mlfaa <mlfaa@hotmail.com>
Date: Thu, 16 Dec 2021 16:05:28 -0300
Subject: [PATCH]  #237 - Adjusting the z-index of the header

---
 src/components/Header/index.js | 2 +-
 src/components/Header/style.js | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index b5b6f959..243e40a0 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -42,7 +42,7 @@ export default function Header(props) {
   const yearsRange = rangeOfYears(props.initialYear, APPLICATION_CONSTANTS.CURRENT_YEAR);
   return (
     <>
-      <AppBar position="sticky" elevation={0}>
+      <AppBar className={classes.bar} position="sticky" elevation={0}>
         <Toolbar>
           <Box width="100%" className={classes.inputOptions}>
             <FormControl id="form-control-year" className={classes.formControl}>
diff --git a/src/components/Header/style.js b/src/components/Header/style.js
index c58cddea..9675b1e8 100644
--- a/src/components/Header/style.js
+++ b/src/components/Header/style.js
@@ -3,6 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { lighten } from 'polished';
 
 export const useStyles = makeStyles((theme) => ({
+  bar: {
+    zIndex: 0,
+  },
   root: {
     flexGrow: 1,
   },