#237 - Adjusting the z-index of the header

labhackercd · Dec 16, 2021 · 2756a58 · 2756a58
1 parent 364f25f
commit 2756a58
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git 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
@@ -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,
   },