Utilizing ReactJS, I am endeavoring to create a secondary (smaller) navbar in the same style as Airtable's product page. My primary navbar is situated at the top and transitions from transparent to dark when scrolled. The secondary bar (highlighted in purple for visibility in the screenshot) currently resides behind the primary navbar, but my aim is for it to be positioned right below the header background image.

Main Navbar - "Header.js"

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) => ({
    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(() => {
        setChecked(true);
    }, []);

    return (
        <section>
        <div className={classes.root} id="header">
            <ScrollToColor>
            <AppBar className={classes.appbar} elevation={0}>
                <Toolbar className={classes.appbarWrapper}>
                    <h1 className={classes.appbarTitle}>
                        Logo <span className={classes.colorText}>Colored</span>
                        </h1>
                    <IconButton>
                        <SortIcon className={classes.icon} />
                    </IconButton>
                </Toolbar>
            </AppBar>
            </ScrollToColor>

            <Collapse
            in={checked}
            {...(checked ? { timeout: 1000 } : {})}
            collapsedHeight={50}>
                <div className={classes.container}>
                    <h1 className={classes.title}>
                        Main header <br />
                        at <span className={classes.colorText}>title.</span>
                    </h1>
                    <Scroll to="info-card" smooth={true}>
                    <IconButton>
                      <ExpandMoreIcon className={classes.goDown} />
                    </IconButton>
                    </Scroll>
                </div>
            </Collapse>
        </div>
        </section>
    );
}

Secondary Navbar - "StickyHeader.js"

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) => ({
    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(() => {
        setChecked(true);
    }, []);

    return (
        <section>
        <div className={classes.root} style={{ top: "72px" }} id="stickyheader">
            <AppBar className={classes.appbar} elevation={4}>
                <Toolbar className={classes.appbarWrapper}>
                    <ul className={classes.list} style={{ listStyleType: "none" }}>
                        <li>
                            <a href="#product" data-id="product" data-is-active="true">Database</a>
                        </li>
                    </ul>
                </Toolbar>
            </AppBar>
        </div>
        </section>
    );
}

Landing Page snippet

export default function Landing() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
          <CssBaseline />
          <Header />
          <StickyHeader />
          <InfoCards />

      </div>
  );
}

Tried adjusting:

• Segmenting each component into their own files to serve as separate 'sections' stacked on top of one another
• Modifying margin, marginTop properties in useStyles with position: relative
• Applying a similar approach with position: sticky
• Including style={{ top: "##px" }} to the navbar's div to test if it shifts downward

Images Secondary navbar behind primary at top https://i.stack.imgur.com/PorBU.jpg

Secondary navbar behind primary when scrolled https://i.stack.imgur.com/LuNmi.jpg

Conceptual view of the desired outcome (secondary navbar sticking and merging with primary navbar upon scrolling) https://i.stack.imgur.com/P9zfs.jpg

I'm unsure if there is a simple styling adjustment needed for these navbars or if a more intricate solution is required. Any guidance provided would be greatly appreciated.

Note The logo and header titles belong to the first navbar. The second (purple) navbar features a small 'Database' clickable text that may not be clearly visible in the initial screenshots due to its placement over 'Logo colored.'

Update Screenshot result from MB_'s answer https://i.stack.imgur.com/QoErl.png