header.html

 <!-- Save this as header.html -->
 <header id="header" class="d-flex align-items-center">
  <div class="container d-flex align-items-center">

    <div class="logo me-auto">
      <h1><a href="index.html"><img src="assets/img/MissFactorial AcademyLogoPinkParenthesis.png" alt="" class="img-fluid">&nbsp; Miss Factorial Academy</a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html"><img src="assets/img/favicon.png" alt="" class="img-fluid"></a> -->
    </div>

    <nav id="navbar" class="navbar">
      <ul>
        <li><a class="nav-link scrollto" href="index.html">Welcome</a></li>
        <li class="dropdown"><a class="nav-link scrollto" href="#services"><span>Services</span> <i class="bi bi-chevron-down"></i></a>
          <ul>
            <li><a href="services/custom-ai-training.html">AI Training for Business Teams</a></li>
            <li><a href="services/packaged-ai-services.html">Packaged AI Services</a></li>
            <li><a href="services/ai-advisory.html">AI Advisory: 1:1 Sessions</a></li>
            <li><a href="services/on-demand-courses.html">On-Demand Courses</a></li>
            <li><a href="services/data-literacy-outreach.html">Data Literacy Outreach</a></li>
            <li><a href="services/resource-center.html">Resource Center</a></li>
          </ul>
        </li>
        <!--<li><a href="news.html">News</a></li> -->
      </ul>
      <i class="bi bi-list mobile-nav-toggle"></i>
    </nav><!-- .navbar -->

  </div>
</header><!-- End Header -->