Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- <!DOCTYPE html> -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Megamenu</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
<!--     <link
      rel="stylesheet"
      href="https://broward.org/Style Library/V7/WebParts/_react/megamenu/style.css"
    /> -->
    <!-- be sure to replace "development" with "production" in the path (or vice versa) depending on what is needed -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="container" class="px-0"></div>
    <script type="text/babel">
      const { useState } = React;

      function MenuButton(props) {
        return (
          <a
            id="navbarMenu"
            role="button"
            type="button"
            data-bs-auto-close="false"
            data-bs-toggle="dropdown"
            data-bs-target="#megaDropdown"
            aria-controls="#megaDropdown"
            aria-expanded={props.aria}
            className={props.search ? "menu-button hidden" : "menu-button"}
            style={{ width: "48px" }}
            tabIndex="0"
            onClick={props.onClick}
          >
            <i
              className={props.text}
              style={{ color: "#4f4f4f", padding: "4px 16px" }}
            ></i>
          </a>
        );
      }

      function Logo(props) {
        return (
          <img
            src="https://assets.codepen.io/216313/bc-logo.png"
            alt=""
            className={props.search ? "header-logo hidden" : "header-logo"}
          />
        );
      }

      function SearchButton(props) {
        return (
          <a
            className="search-button"
            id="navbarSearch"
            role="button"
            type="button"
            aria-label="search"
            aria-expanded={props.aria}
            style={{ width: "48px" }}
            tabIndex="0"
            onClick={props.onClick}
          >
            <i
              className={props.icon}
              style={{ color: "#4f4f4f", padding: "4px 16px" }}
            ></i>
          </a>
        );
      }

      function SearchBar(props) {
        console.log(props);
        return (
          <input
            type="search"
            placeholder="Search"
            aria-label="Search"
            className={props.closed ? "open" : "closed"}
            // className="form-control"
            // id="datatable-search-input"
          />
        );
      }

      function MegamenuDropdown(props) {
        console.log(props);
        return (
          <div
            id="megaDropdown"
            className={
              props.expanded
                ? "dropdown-menu w-100 mt-0 show"
                : "dropdown-menu w-100 mt-0"
            }
            aria-labelledby="navbarDropdown"
          >
            <div className="container px-0">
              <CategoryMenu
                category={props.category}
                navigation={props.navigation}
                subcategory={props.subcategory}
                onLinkClick={props.onLinkClick}
                onResetStateClick={props.onResetStateClick}
                onSubsiteBackClick={props.onSubsiteBackClick}
              />
            </div>
          </div>
        );
      }

      function CategoryMenu(props) {
        console.log(props, ABOUT[0].link);
        return (
          <div className="d-flex row mx-0 my-4 w-100">
            {props.subcategory === "" &&
            ABOUT[0].link === "/" &&
            props.category ? (
              <TopLevelMenu onLinkClick={props.onLinkClick} />
            ) : props.subcategory === "" &&
              ABOUT[0].link !== "/" &&
              props.category ? (
              <TopLevelMenu onLinkClick={props.onLinkClick} />
            ) : props.subcategory !== "" &&
              ABOUT[0].link !== "/" &&
              !props.category ? (
              <SubcategoryMenu
                onLinkClick={props.onLinkClick}
                onResetStateClick={props.onResetStateClick}
                subcategory={props.subcategory}
              />
            ) : props.subcategory === "" &&
              ABOUT[0].link !== "/" &&
              !props.category ? (
              <SubsiteMenu
                navigation={props.navigation}
                subcategory={props.subcategory}
                onSubsiteBackClick={props.onSubsiteBackClick}
              />
            ) : (
              false
              // TODO: add another option for link not '/' but all other conditions okay to go to top level
            )}
          </div>
        );
      }

      function TopLevelMenu(props) {
        // console.log(props)
        // get subcat to map into links
        return (
          <div className="accordion accordion-flush px-0" id="accordionFlush">
            <div className="accordion-item">
              <h2 id="flush-headingOne" className="mt-0">
                <span
                  className="accordion-button font-weight-bold px-3 collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseOne"
                  aria-expanded="false"
                  aria-controls="flush-collapseOne"
                >
                  Services
                </span>
              </h2>
              <div
                id="flush-collapseOne"
                className="accordion-collapse collapse"
                aria-labelledby="flush-headingOne"
                data-bs-parent="#accordionFlush"
              >
                <div className="accordion-body px-0">
                  {CATEGORIES.map(
                    ({ category, id, icon, tlc }, i, { length }) =>
                      tlc === "services" ? (
                        <a
                          className="accordionLink px-3 mx-0"
                          onClick={props.onLinkClick}
                        >
                          <i className={icon + " categoryIcon"}></i> {category}
                        </a>
                      ) : (
                        false
                      )
                  )}
                </div>
              </div>
            </div>
            <div className="accordion-item">
              <h2 id="flush-headingTwo" className="mt-0">
                <span
                  className="accordion-button font-weight-bold px-3 collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseTwo"
                  aria-expanded="false"
                  aria-controls="flush-collapseTwo"
                >
                  Government
                </span>
              </h2>
              <div
                id="flush-collapseTwo"
                className="accordion-collapse collapse"
                aria-labelledby="flush-headingTwo"
                data-bs-parent="#accordionFlush"
              >
                <div className="accordion-body px-0">
                  {CATEGORIES.map(
                    ({ category, id, icon, tlc }, i, { length }) =>
                      tlc === "government" ? (
                        <a
                          className="accordionLink px-3 mx-0"
                          onClick={props.onLinkClick}
                        >
                          <i className={icon + " categoryIcon"}></i> {category}
                        </a>
                      ) : (
                        false
                      )
                  )}
                </div>
              </div>
            </div>
            <a className="menuLink font-weight-bold px-3 my-2">Newsroom</a>
            <a className="menuLink font-weight-bold px-3 my-2">
              Make a Payment
            </a>
            <a className="menuLink px-3">Public Records Request</a>
            <a className="menuLink px-3">Contact Us</a>
            <a className="menuLink px-3">Report a Complaint</a>
            <a className="menuLink px-3">Terms of Use</a>
            <a className="menuLink px-3">Accessibility Statement</a>
          </div>
        );
      }

      function SubcategoryMenu(props) {
        console.log(CATEGORIES, props);

        // let categoryTitle = ABOUT[0].category;
        // let backLink =
        //   categoryTitle[0].toUpperCase() + categoryTitle.substring(1);

        return (
          <div className="px-0">
            <a className="px-3 mb-4" onClick={props.onResetStateClick}>
              <i className="fa-solid fa-angle-left"></i> All Categories
            </a>
            <h2
              className="accordion-header font-weight-bold mx-3 my-3"
              id="flush-headingOne"
            >
              {props.subcategory}
            </h2>

            {CATEGORIES.map(
              ({ category, id, icon, tlc, subcategories }, i, { length }) =>
                category === props.subcategory ? (
                  <div className="accordionLinks">
                    {subcategories.map(({ name, link }, i, { length }) => (
                      <a className="accordionLink px-3 mx-0" href={link}>
                        {name}
                      </a>
                    ))}
                  </div>
                ) : (
                  false
                )
            )}
          </div>
        );
      }

      function SubsiteMenu(props) {
        console.log(props, ABOUT, props.navigation.Nodes != undefined);

        return (
          <div className="px-0">
            <a className="px-3 mb-4" onClick={props.onSubsiteBackClick}>
              <i className="fa-solid fa-angle-left"></i> {ABOUT[0].subcategory}
            </a>
            <h2
              className="accordion-header font-weight-bold mx-3 my-3"
              id="flush-headingOne"
            >
              {ABOUT[0].title}
            </h2>

            {ABOUT.map(
              (
                {
                  link,
                  title,
                  about,
                  address,
                  telephone,
                  email,
                  facebook,
                  twitter,
                  youtube,
                  instagram,
                  subcategory,
                  category,
                },
                i,
                { length }
              ) => (
                // category === props.subcategory ? (
                <div className="accordionLinks mx-3 my-3">
                  <div
                    className="about pt-3"
                    style={{ borderBottom: "1px solid #eaeaea" }}
                  >
                    <div className="mb-4 pb-3">
                      <a
                        className="about-email-button font-weight-bold"
                        href={"mailto:" + email}
                      >
                        Email
                      </a>
                      <a
                        className="about-call-button font-weight-bold"
                        href={"tel:+1" + telephone}
                      >
                        Call
                      </a>
                    </div>
                    <div
                      className="mt-4 pt-4"
                      style={{ borderTop: "1px solid #eaeaea" }}
                    >
                      {about}
                    </div>
                    <div className="about-block">
                      <span className="font-weight-bold">Address: </span>
                      {address}
                    </div>
                    <div className="about-block">
                      <span className="font-weight-bold">Email: </span>
                      <a href="">{email}</a>
                    </div>
                    <div className="about-block">
                      <span className="font-weight-bold">Phone: </span>
                      <a href="">{telephone}</a>
                    </div>
                    <ul className="about-socialLinks">
                      <li className="about-social">
                        <a href={facebook}>
                          <i className="fa-brands fa-facebook"></i>
                        </a>
                      </li>
                      <li className="about-social">
                        <a href={twitter}>
                          <i className="fa-brands fa-twitter"></i>
                        </a>
                      </li>
                      <li className="about-social">
                        <a href={youtube}>
                          <i className="fa-brands fa-youtube"></i>
                        </a>
                      </li>
                      <li className="about-social">
                        <a href={instagram}>
                          <i className="fa-brands fa-instagram"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div className="mt-4 pt-1 subsiteNavTitle">
                    site navigation
                  </div>
                  <div className="accordionLinks mt-3">
                    {props.navigation.Nodes != undefined
                      ? props.navigation.Nodes.map(
                          ({ Title, SimpleUrl, Nodes }, i, { length }) =>
                            Nodes.length < 1 ? (
                              <a
                                className="accordionLink px-0 mx-0"
                                href={SimpleUrl}
                              >
                                {Title}
                              </a>
                            ) : (
                              <div
                                id={"flush-collapse" + key}
                                className="accordion-collapse collapse"
                                aria-labelledby={"flush-heading" + key}
                                data-bs-parent="#accordionFlush"
                              >
                                <div className="accordion-body px-0">
                                  {Nodes.map(
                                    ({ Title, SimpleUrl }, i, { length }) => (
                                      <a
                                        className="accordionLink px-3 mx-0"
                                        href={SimpleUrl}
                                      >
                                        {Title}
                                      </a>
                                    )
                                  )}
                                </div>
                              </div>
                            )
                        )
                      : false}
                  </div>
                </div>
              )
            )}
          </div>
        );
      }

      class Header extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            text: "fa fa-bars",
            expanded: false,
            icon: "fa fa-search",
            search: false,
            category: false,
            subcategory: "",
            subsite: false,
            navigation: [],
          };
          this.setState = this.setState.bind(this);
          this.handleMenuClick = this.handleMenuClick.bind(this);
          this.handleSearchClick = this.handleSearchClick.bind(this);
          this.handleLinkClick = this.handleLinkClick.bind(this);
          this.handleResetStateClick = this.handleResetStateClick.bind(this);
          this.handleSubsiteBackClick = this.handleSubsiteBackClick.bind(this);
        }

        componentDidMount() {
          axios
            .get(
              `/techproto/v6/MattDEV/2022/_api/navigation/menustate?mapprovidername='GlobalNavigationSwitchableProvider'`
            )
            .then((res) => {
              const navigation = res.data;

              this.setState({ navigation });
              console.log(navigation);
            });
        }

        handleMenuClick(e) {
          this.setState({
            text:
              e.target.className === "fa fa-bars"
                ? "fa fa-times"
                : "fa fa-bars",
            expanded: e.target.className === "fa fa-bars" ? true : false,
          });
        }
        handleSearchClick(e) {
          this.setState({
            icon:
              e.target.className === "fa fa-times"
                ? "fa fa-search"
                : "fa fa-times",
            search: e.target.className === "fa fa-search" ? true : false,
          });
        }
        handleLinkClick(e) {
          this.setState({
            category: false,
            subcategory: e.target.innerText.trim(),
            subsite: false,
          });
          // console.log(this.state.subcategory);
        }
        handleResetStateClick(e) {
          console.log(e.target);
          this.setState({
            category: true,
            subcategory: "",
            subsite: false,
          });
        }
        handleSubsiteBackClick(e) {
          console.log(e.target);
          this.setState({
            category: false,
            subcategory: e.target.innerText.trim(),
            subsite: true,
          });
          // console.log(this.state.subcategory);
        }
        render() {
          // axios
          //   .get(
          //     "/techproto/v6/MattDEV/2022/_api/navigation/menustate?mapprovidername='GlobalNavigationSwitchableProvider'"
          //   )
          //   .then((response) => {
          //     console.log(response.data);
          //   });

          return (
            <div className="w-100">
              <nav className="navbar navbar-expand navbar-light shadow-0 px-0">
                <div className="container-fluid">
                  <div
                    className="collapse navbar-collapse d-flex justify-content-between"
                    id="navbarExample1"
                  >
                    <MenuButton
                      onClick={this.handleMenuClick}
                      text={this.state.text}
                      expanded={this.state.expanded}
                      search={this.state.search}
                    />
                    <Logo search={this.state.search} />
                    <SearchButton
                      onClick={this.handleSearchClick}
                      icon={this.state.icon}
                    />
                    <SearchBar closed={this.state.search} />
                    <MegamenuDropdown
                      expanded={this.state.expanded}
                      category={this.state.category}
                      navigation={this.state.navigation}
                      subcategory={this.state.subcategory}
                      onLinkClick={this.handleLinkClick}
                      onResetStateClick={this.handleResetStateClick}
                      onSubsiteBackClick={this.handleSubsiteBackClick}
                    />
                  </div>
                </div>
              </nav>
            </div>
          );
        }
      }

      const ABOUT = [
        {
          link: "/airport",
          title: "Airport",
          about:
            "Broward County's Fort Lauderdale-Hollywood International Airport (FLL) and North Perry Airport (HWO), a general aviation airport, form a diverse and dynamic airport system. This airport system serves the needs of 35.9 million passengers and the general aviation community throughout South Florida.",
          address: "100 Terminal Drive Fort Lauderdale, FL 33315",
          // hours: [
          //   {
          //     monday: "",
          //     tuesday: "",
          //     wednesday: "",
          //     thursday: "",
          //     friday: "",
          //     saturday: "",
          //     sunday: "",
          //   },
          // ],
          telephone: "866-435-9355",
          email: "contactfll@broward.org",
          facebook:
            "https://www.facebook.com/FortLauderdaleHollywoodInternationalAirport",
          twitter: "https://twitter.com/FLLFlyer",
          youtube: "#",
          instagram: "#",
          subcategory: "Transportation",
          category: "services",
        },
      ];

      const CATEGORIES = [
        {
          tlc: "services",
          category: "Business & Consumers",
          icon: "fa-solid fa-handshake",
          id: 1,
          subcategories: [
            { name: "BizBeyond", link: "/bizbeyond" },
            { name: "Business", link: "/business" },
            {
              name: "Economic & Small Business Development",
              link: "/econdev",
            },
            { name: "Consumer Protection Division", link: "/consumer" },
          ],
        },
        {
          tlc: "government",
          category: "Courts & Law",
          icon: "fa-solid fa-gavel",
          id: 2,
          subcategories: [
            { name: "Broward County Charter", link: "/charter" },
            { name: "Code Appeals", link: "/codeappeals" },
            { name: "County Attorney", link: "/legal" },
            { name: "Courts", link: "/courts" },
            { name: "Forensic Science Center", link: "/forensicsciencecenter" },
            { name: "Inspector General", link: "/inspectorgeneral" },
            { name: "Justice Services", link: "/justiceservices" },
            { name: "Legislative Delegation", link: "/legislative" },
          ],
        },
        {
          tlc: "services",
          category: "Culture & Recreation",
          icon: "fa-solid fa-map",
          id: 3,
          subcategories: [
            { name: "Arena", link: "/arena" },
            { name: "Black History", link: "/blackhistory" },
            { name: "Counties Matter", link: "/countiesmatter" },
            { name: "Cultural Division", link: "/arts" },
            { name: "Diversity", link: "/diversity" },
            { name: "Heroes", link: "/heroes" },
            { name: "Historic Preservation Board", link: "/history" },
            { name: "Library", link: "/library" },
            { name: "Parks", link: "/parks" },
          ],
        },
        {
          tlc: "government",
          category: "Employment & Benefits",
          icon: "fa-solid fa-briefcase",
          id: 4,
          subcategories: [
            { name: "Benefits", link: "/benefits" },
            { name: "Careers", link: "/careers" },
            { name: "Human Resources", link: "/humanresources" },
            { name: "New Hires", link: "/newhires" },
            { name: "Open Enrollment", link: "/openenrollment" },
            {
              name: "Professional Standards/Human Rights Section",
              link: "/professionalstandards",
            },
            { name: "Retirement/COBRA", link: "/retirees" },
            { name: "WellBeing", link: "/wellbeing" },
          ],
        },
        {
          tlc: "services",
          category: "Environment",
          icon: "fa-solid fa-tree",
          id: 5,
          subcategories: [
            { name: "Air Quality", link: "/air" },
            { name: "Beaches", link: "/beaches" },
            {
              name: "Climate & Energy",
              link: "/climate",
            },
            {
              name: "Environmental Lab",
              link: "/environmentallab",
            },
            {
              name: "Environmental Permitting Division",
              link: "/environment",
            },
            { name: "ePermits", link: "/ePermits" },
            { name: "Go Green", link: "/gogreen" },
            { name: "Greenways", link: "/Greenways" },
            { name: "Natural Resources", link: "/NaturalResources" },
            { name: "NatureScape", link: "/NatureScape" },
            {
              name: "Resilience",
              link: "/resilience",
            },
            {
              name: "Resilient Environment Department",
              link: "/EnvironmentandGrowth",
            },
          ],
        },
        {
          tlc: "services",
          category: "Garbage & Recycling",
          icon: "fa-solid fa-recycle",
          id: 6,
          subcategories: [
            { name: "Flag Disposal", link: "/FlagDisposal" },
            {
              name: "Solid Waste Notifications",
              link: "/SolidWasteNotifications",
            },
            {
              name: "Solid Waste & Recycling Services",
              link: "/WasteAndRecycling",
            },
          ],
        },
        {
          tlc: "government",
          category: "Government & Elections",
          icon: "fa-solid fa-flag",
          id: 7,
          subcategories: [
            { name: "Accounting", link: "/accounting" },
            { name: "Agencies & Services", link: "/AgenciesAndServices" },
            { name: "Awards", link: "/awards" },
            { name: "Call Center", link: "/CallCenter" },
            {
              name: "Commission on the Status of Women",
              link: "/StatusofWomen",
            },
            { name: "County Administration", link: "/Administrator" },
            { name: "County Commission", link: "/commission" },
            { name: "Finance", link: "/finance" },
            {
              name: "Intergovernmental Affairs/Boards Section",
              link: "/Intergovernmental",
            },
            { name: "Office of Management & Budget", link: "/budget" },
            { name: "Open Government", link: "/OpenGovernment" },
            { name: "Planning Council", link: "/PlanningCouncil" },
            { name: "Purchasing", link: "/purchasing" },
            { name: "Redistricting", link: "/Redistricting" },
            { name: "Risk Management", link: "/RiskManagement" },
            { name: "Value Adjustment Board", link: "/vab" },
            { name: "Volunteer", link: "/Volunteer" },
            { name: "Voter Resources", link: "/VoterResources" },
          ],
        },
        {
          tlc: "services",
          category: "Health",
          icon: "fa-solid fa-heart",
          id: 8,
          subcategories: [
            { name: "Broward Addiction Recovery", link: "/AddictionRecovery" },
            {
              name: "Broward Regional Emergency Medical Services Council",
              link: "/browardems",
            },
            { name: "Coronavirus (COVID-19)", link: "/coronavirus" },
            { name: "Health Care Services", link: "/healthcare" },
            {
              name: "Health Facilities Authority",
              link: "/HealthFacilitiesAuthority",
            },
            { name: "Medical Examiner", link: "/MedicalExaminer" },
            {
              name: "Nancy J. Cotterman Center",
              link: "/NancyJCottermanCenter",
            },
            { name: "Ryan White Program", link: "/RyanWhite" },
            { name: "Vulnerable Population Registry", link: "/Registry" },
          ],
        },
        {
          tlc: "services",
          category: "Housing & Buildings",
          icon: "fa-solid fa-building",
          id: 9,
          subcategories: [
            { name: "Broward Housing Council", link: "/BrowardHousingCouncil" },
            {
              name: "Broward Municipal Services District",
              link: "/MunicipalServicesDistrict",
            },
            { name: "Broward Next", link: "/BrowardNext" },
            { name: "Building Code Services", link: "/Building" },
            { name: "CARES", link: "/cares" },
            {
              name: "Central County Community Redevelopment Agency",
              link: "/CentralCRA",
            },
            { name: "Construction Management", link: "/construction" },
            {
              name: "Convention Center Expansion & Headquarters Hotel Project",
              link: "/CCExpansion",
            },
            { name: "Facilities Management", link: "/Facilities" },
            {
              name: "Housing Finance & Community Redevelopment",
              link: "/Housing",
            },
            { name: "Housing Finance Authority", link: "/HFA" },
            { name: "Land of Opportunity", link: "/BBTRedevelopment" },
            {
              name: "Urban Planning Division",
              link: "/Planning",
            },
            { name: "Real Property", link: "/RealProperty" },
            { name: "Rent Assistance", link: "/RentAssistance" },
          ],
        },
        // {
        //   category: "News & Media",
        //   icon: "fa-handshake",
        //   id: 10,
        //   subcategories: [
        //     {
        //       name: "Broward Now",
        //       link: "//broward.granicus.com/ViewPublisher.php?view_id=11",
        //     },
        //     { name: "eNews", link: "/ENews" },
        //     { name: "Media Room", link: "/MediaRoom" },
        //     { name: "News", link: "/News" },
        //     { name: "Print Shop", link: "/PrintShop" },
        //     { name: "Public Communications", link: "/PublicInfo" },
        //     { name: "Stay Connected!", link: "/StayConnected" },
        //   ],
        // },
        {
          tlc: "services",
          category: "Pets, Pests & Wildlife",
          icon: "fa-solid fa-paw",
          id: 11,
          subcategories: [
            { name: "Animal Care", link: "/animal" },
            { name: "Manatees", link: "/manatees" },
            { name: "Mosquito Control", link: "/Mosquito" },
            { name: "Zap Zika", link: "/ZapZika" },
          ],
        },
        {
          tlc: "services",
          category: "Public Safety",
          icon: "fa-solid fa-exclamation",
          id: 12,
          subcategories: [
            { name: "Broward EMD", link: "/BrowardEMD" },
            {
              name: "Crisis Intervention & Support Division",
              link: "/CrisisIntervention",
            },
            { name: "Emergency", link: "/Emergency" },
            {
              name: "Emergency Preparedness for Residents at Risk",
              link: "/AtRisk",
            },
            { name: "Hurricane", link: "/Hurricane" },
            {
              name: "Office of Regional Communications and Technology",
              link: "/911",
            },
          ],
        },
        {
          tlc: "services",
          category: "Records",
          icon: "fa-solid fa-archive",
          id: 13,
          subcategories: [
            { name: "Auditor", link: "/auditor" },
            { name: "County Annual Reports", link: "/countyAnnualReport" },
            {
              name: "Records, Taxes & Treasury Division",
              link: "/RecordsTaxesTreasury",
            },
          ],
        },
        {
          tlc: "services",
          category: "Streets & Highways",
          icon: "fa-solid fa-road",
          id: 14,
          subcategories: [
            { name: "Highway & Bridge Maintenance Division", link: "/Streets" },
            {
              name: "Highway Construction & Engineering",
              link: "/BCEngineering",
            },
            {
              name: "Mobility Advancement Program",
              link: "/PennyForTransportation",
            },
            { name: "Public Works", link: "/Publicworks" },
            { name: "Traffic Engineering Division", link: "/Traffic" },
          ],
        },
        {
          tlc: "services",
          category: "Support",
          icon: "fa-solid fa-hands",
          id: 15,
          subcategories: [
            { name: "Christmas in July", link: "/ChristmasInJuly" },
            { name: "Children’s Services Administration", link: "/Children" },
            { name: "Elderly Services", link: "/ElderlyAndVeterans" },
            { name: "Family Success", link: "/consumer" },
            { name: "Food Drive", link: "/bbbc" },
            { name: "Homeless Initiative Partnership", link: "/Homeless" },
            { name: "Human Services", link: "/HumanServices" },
            { name: "Kids", link: "/Kids" },
            { name: "Residents", link: "/Residents" },
            { name: "Together 4 Broward", link: "/together4broward" },
            { name: "Veterans Services", link: "/veterans" },
          ],
        },
        // {
        //   category: "Taxes & Bills",
        //   icon: "fa-handshake",
        //   id: 16,
        //   subcategories: [
        //     { name: "Irrigation Rebate", link: "/IrrigationRebate" },
        //     {
        //       name: "Records, Taxes & Treasury Division",
        //       link: "/RecordsTaxesTreasury",
        //     },
        //   ],
        // },
        {
          tlc: "services",
          category: "Transportation",
          icon: "fa-solid fa-bus",
          id: 17,
          subcategories: [
            { name: "Broward County Transit", link: "/bct" },
            { name: "FLL Airport", link: "/Airport" },
            { name: "North Perry Airport", link: "/NorthPerryAirport" },
            { name: "Fleet Services", link: "/FleetServices" },
            { name: "Parking", link: "/parking" },
          ],
        },
        {
          tlc: "services",
          category: "Water",
          icon: "fa-solid fa-tint",
          id: 18,
          subcategories: [
            { name: "Water & Wastewater Services", link: "/WaterServices" },
            { name: "Water Resources", link: "/waterresources" },
          ],
        },
      ];

      // ReactDOM.render(<Header />, document.querySelector("nav")); 
      ReactDOM.render(<Header />, document.getElementById("container"));
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
    <script>
      // get rid of padding on header <nav>
      // window.addEventListener("load", (event) => {
      //   let nav = document.querySelector("nav");
      //   nav.style.padding = "0";
      //   nav.style.backgroundColor = "#fff";
      //   nav.style.position = "initial"
      // });
    </script>
  </body>
</html>

              
            
!

CSS

              
                @font-face {
  font-family: "Arquette";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Extralight.eot"); /* IE9 Compat Modes */
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Extralight.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Extralight.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Extralight.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Extralight.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Arquette";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Light.eot"); /* IE9 Compat Modes */
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Light.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Light.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Light.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Light.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Arquette";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Regular.eot"); /* IE9 Compat Modes */
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Regular.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Regular.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Arquette";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Medium.eot"); /* IE9 Compat Modes */
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Medium.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Medium.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Medium.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Medium.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Arquette";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Semibold.eot"); /* IE9 Compat Modes */
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Semibold.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Semibold.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Semibold.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Semibold.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Arquette";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Bold.eot"); /* IE9 Compat Modes */
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Bold.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Bold.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Bold.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Bold.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Arquette";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Black.eot"); /* IE9 Compat Modes */
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Black.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Black.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Black.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/216313/ATCArquette-Black.ttf")
      format("truetype"); /* Safari, Android, iOS */
  font-weight: 700;
  font-style: normal;
}
body {
  font-family: "Arquette";
  color: #212121;
  font-weight: 300;
}
#megaDropdown {
  background-color: #f9fafc;
  height: 100vh;
}

/* hide scrollbar but allow scrolling */
html {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
}

html::-webkit-scrollbar {
  display: none;
}

input[type="search"].closed {
  display: none;
  border-radius: 0px;
  border: 0px;
  padding: 8px 0px 6px;
  font-size: 12px;
  margin: 0 8px;
  width: 0;
  position: absolute;
  transition: width 0.4s ease-in-out;
}

input[type="search"].open {
  display: block;
  width: 100%;
  border-radius: 50px;
  border: 2px solid #aaafb2;
  padding: 8px 16px 6px;
  font-size: 12px;
  margin: 0 8px;
  background-color: #fafafa;
  transition: width 0.4s ease-in-out;
}

/* .menu-button {
  padding: 0.2rem 0.7rem 0.1rem;
  color: #4f4f4f;
  border: 1px solid #ebeef6;
  background-color: #fff;
  width: 68px
} */

.header-logo {
  width: 140px;
}

.menu-button.hidden,
.header-logo.hidden {
  display: none;
  transition: all 0.4s ease-in-out;
}

.font-weight-bold {
  font-weight: 600;
}

.accordion-header {
  position: relative;
  z-index: 1;
  animation: fadeUp 0.3s ease-out;
}

.ms-bcrteElement-h2,
.ms-rtestate-field h2 {
  margin-top: 0 !important;
}

h2[id^="flush-heading"] {
  margin-top: 0;
}

@keyframes fadeUp {
  from {
    opacity: 0%;
    font-size: 18px;
    font-weight: 300;
    top: 150px;
  }
  to {
    opacity: 100%;
    font-size: 25px;
    font-weight: 700;
    top: 0px;
  }
}

.accordion-button:not(.collapsed) {
  color: initial;
}

/* .accordionLinks {
} */

a.accordionLink {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 300;
  color: #484b4c;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  cursor: pointer;
}

a.accordionLink:hover {
  background-color: #fafafa;
}
a.menuLink {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.15rem 0;
  font-size: 1rem;
  font-weight: 300;
  color: #484b4c;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
}

a.menuLink:hover {
  color: #0c0d0d;
}

.categoryIcon {
  width: 30px;
  height: 30px;
  background-color: #006099;
  margin-right: 12px;
  padding: 7px 3.5px 0;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
}

.about-block {
  margin: 12px 0;
}

.about .about-block, .about .about-block a, .navbar.double-nav .dropdown-menu .about a {
  font-size: 11px !important;
}

.about-socialLinks {
  list-style: none;
  font-size: 13px;
  margin-inline-start: 0;
  padding-left: 0;
  padding-inline-start: 0;
}

ul.about-socialLinks > li {
  display: inline-block;
  margin: 12px 20px;
  color: initial;
}

ul.about-socialLinks > li:first-child {
  margin-left: 0px;
}

.about-email-button,
.about-call-button {
  padding: 8px 16px 10px;
  background-color: #fafafa;
  margin-right: 8px;
  border-radius: 4px;
  border: 1px solid #ced5d9;
  color: #0c0d0d;
}

.subsiteNavTitle {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

              
            
!

JS

              
                
              
            
!
999px

Console