title: How to add a sticky navbar below the top navbar section? ReactJS
body: <p>Using ReactJS, I am trying to make a second (smaller) navbar the same way <a href="https://airtable.com/product" rel="nofollow noreferrer">Airtable has done on their product page</a>. My first navbar is at the top, and turns dark from transparent once I scroll. The second bar (colored purple in the screenshot to easily see) is currently behind the first navbar when I would like it to sit right underneath the header background image.</p>
  <p>First (main) Navbar - &quot;Header.js&quot;</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import { AppBar, IconButton, Toolbar, Collapse } from '@material-ui/core';
  import SortIcon from '@material-ui/icons/Sort';
  import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
  import { Link as Scroll } from 'react-scroll';
  import ScrollToColor from './ColorChangeOnScroll';
  
  const useStyles = makeStyles((theme) =&gt; ({
      root: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100vh',
          fontFamily: 'Nunito',
      },
      appbar: {
          background: 'none',
      },
      appbarTitle:{
          flexGrow: '1',
      },
      appbarWrapper:{
          width: '80%',
          margin: '0 auto',
      },
      icon: {
          color: '#fff',
          fontSize: '2rem',
      },
      colorText: {
          color: '#34cbc2',
      },
      container: {
          textAlign: 'center',
      },
      title: {
          color: '#fff',
          fontSize: '4rem',
      },
      goDown: {
          color: '#34cbc2',
          fontSize: '4rem',
      },
  }));
  
  export default function Header() {
      const classes = useStyles();
      const [checked, setChecked] = useState(false);
      useEffect(() =&gt; {
          setChecked(true);
      }, []);
  
      return (
          &lt;section&gt;
          &lt;div className={classes.root} id=&quot;header&quot;&gt;
              &lt;ScrollToColor&gt;
              &lt;AppBar className={classes.appbar} elevation={0}&gt;
                  &lt;Toolbar className={classes.appbarWrapper}&gt;
                      &lt;h1 className={classes.appbarTitle}&gt;
                          Logo &lt;span className={classes.colorText}&gt;Colored&lt;/span&gt;
                          &lt;/h1&gt;
                      &lt;IconButton&gt;
                          &lt;SortIcon className={classes.icon} /&gt;
                      &lt;/IconButton&gt;
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
              &lt;/ScrollToColor&gt;
  
              &lt;Collapse
              in={checked}
              {...(checked ? { timeout: 1000 } : {})}
              collapsedHeight={50}&gt;
                  &lt;div className={classes.container}&gt;
                      &lt;h1 className={classes.title}&gt;
                          Main header &lt;br /&gt;
                          at &lt;span className={classes.colorText}&gt;title.&lt;/span&gt;
                      &lt;/h1&gt;
                      &lt;Scroll to=&quot;info-card&quot; smooth={true}&gt;
                      &lt;IconButton&gt;
                        &lt;ExpandMoreIcon className={classes.goDown} /&gt;
                      &lt;/IconButton&gt;
                      &lt;/Scroll&gt;
                  &lt;/div&gt;
              &lt;/Collapse&gt;
          &lt;/div&gt;
          &lt;/section&gt;
      );
  }
  </code></pre>
  <p>Second Navbar - &quot;StickyHeader.js&quot;</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import { AppBar, IconButton, Toolbar, Collapse } from '@material-ui/core';
  import SortIcon from '@material-ui/icons/Sort';
  
  const useStyles = makeStyles((theme) =&gt; ({
      root: {
          top: '1000px',
          display: 'flex',
          position: 'sticky',
          justifyContent: 'center',
          alignItems: 'center',
          fontFamily: 'Nunito',
      },
      appbar: {
          background: 'purple',
      },
      list: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
      },
  }));
  
  export default function Header() {
      const classes = useStyles();
      const [checked, setChecked] = useState(false);
      useEffect(() =&gt; {
          setChecked(true);
      }, []);
  
      return (
          &lt;section&gt;
          &lt;div className={classes.root} style={{ top: &quot;72px&quot; }} id=&quot;stickyheader&quot;&gt;
              &lt;AppBar className={classes.appbar} elevation={4}&gt;
                  &lt;Toolbar className={classes.appbarWrapper}&gt;
                      &lt;ul className={classes.list} style={{ listStyleType: &quot;none&quot; }}&gt;
                          &lt;li&gt;
                              &lt;a href=&quot;#product&quot; data-id=&quot;product&quot; data-is-active=&quot;true&quot;&gt;Database&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
          &lt;/div&gt;
          &lt;/section&gt;
      );
  }
  </code></pre>
  <p>Landing Page snippet</p>
  <pre><code>export default function Landing() {
    const classes = useStyles();
  
    return (
        &lt;div className={classes.root}&gt;
            &lt;CssBaseline /&gt;
            &lt;Header /&gt;
            &lt;StickyHeader /&gt;
            &lt;InfoCards /&gt;
  
        &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Tried adjusting:</strong></p>
  <ul>
  <li>Separating each component into their own files to act as 'sections,' so one would sit on top of the other</li>
  <li>Adjusting <code>margin</code>, <code>marginTop</code> in <code>useStyles</code> with <code>position: relative</code></li>
  <li>Same as above with <code>position: sticky</code></li>
  <li>Added <code>style={{ top: &quot;##px&quot; }}</code> to the navbar's <code>div</code> to see if that pushed it downwards</li>
  </ul>
  <p><strong>Images</strong>
  2nd navbar behind 1st at top
  <a href="https://i.stack.imgur.com/PorBU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PorBU.jpg" alt="2nd navbar behind 1st at top" /></a></p>
  <p>2nd navbar behind 1st, scrolled
  <a href="https://i.stack.imgur.com/LuNmi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LuNmi.jpg" alt="2nd navbar behind 1st, scrolled" /></a></p>
  <p>Photoshopped view of the desired outcome (where 2nd navbar is sticky and 'joins' the 1st navbar when scrolled past)
  <a href="https://i.stack.imgur.com/P9zfs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P9zfs.jpg" alt="Photoshopped view of the desired outcome" /></a></p>
  <p>I'm not sure if I am missing something simple in the styling for these navbars, or if this needs something more complex. Any advice is appreciated in advance.</p>
  <p><strong>Note</strong>
  The logo and header titles are a part of the first navbar. The second (purple) navbar has a very small 'Database' clickable text that is difficult to see in the first couple screenshots, right on top of 'Logo colored.'</p>
  <p><strong>Update</strong>
  Resulting screenshot from MB_'s answer
  <a href="https://i.stack.imgur.com/QoErl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QoErl.png" alt="enter image description here" /></a></p>