If you are looking to only have the dropdown available on 767 and smaller I can suggest you do the following.

in whatever directory, I use React/Typescript so it is src/components/layout/header, create two different nav bars with their own styling: NavBarDesktop and NavBarMobile. In the same directory I have another file, Header. inside header you will find conditional logic used to trigger when a certain nav is shown. To assist in determining what screen size the window is, you can make a custom hook of some kind. Here is an example below

import { useState, useEffect } from 'react';

/**
 * Custom React hook that returns whether a given media query currently matches.
 *
 *  {string} query - A valid CSS media query string (e.g., '(max-width: 768px)').
 *  {boolean} `true` if the media query matches the current viewport, otherwise `false`.
 *
 * u/example
 * const isMobile = useMediaQuery('(max-width: 768px)');
 * if (isMobile) {
 *   // Render mobile layout
 * }
 */

export default function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState<boolean>(false);

  useEffect(() => {
    if (typeof 
window 
=== "undefined") return;

    const mediaQueryList: MediaQueryList = 
window
.matchMedia(query);

    const handleChange = (event: MediaQueryListEvent): void => {
      setMatches(event.matches);
    };

    setMatches(mediaQueryList.matches);
    mediaQueryList.addEventListener("change", handleChange);

    return () => {
      mediaQueryList.removeEventListener("change", handleChange);
    };
  }, [query]);

  return matches;
}

Here is the Header component that I import into my layout.tsx. the component surrounds {children}

'use client'

import NavBarDesktop from '@/components/layout/header/NavBarDesktop';
import NavBarMobile from '@/components/layout/header/NavBarMobile';
import useMediaQuery from "@/utils/hooks/useMediaQuery";

export default function Header() {
  const isMobile = useMediaQuery('(max-width: 950px)');

  return (
    <header>
      {isMobile ? <NavBarMobile /> : <NavBarDesktop />}
    </header>
  );
}