Included header.html using jQuery and lost CSS formatting

Question

I have a simple static HTML site with a header.html file I'd like to reuse on each of the pages. I followed the suggestion from how to load header and footer before the content using jquery.load() which appeared to work but caused the drop-down on hover no longer function (must be clicked). The top is the navbar using jQuery.load, the bottom is identical code placed inline within my index.html. My css and js files are all included in my index.html file, not in the header.html file. Any thoughts on why this is occurring?

In my header, I have the code below:

<script>
    $(document).ready(function() {
        $("#header").load("header.html");
        $("#footer").load("footer.html");
    });
 </script>

..and to include the header/footer I have:

<div id="header"></div>

Contents of my current header.html file:

<section class="header-uper">
     <div class="container clearfix">
        <div class="logo">
           <figure>
              <a href="index.html">
              <img src="images/logo.png" alt="" width="250em">
              </a>
           </figure>
        </div>
        <div class="right-side header-padding">
           <ul class="contact-info">
              <li class="item">
                 <div class="icon-box">
                    <i class="fa fa-envelope-o spacer"></i>
                 </div>
                 <strong>Email</strong>
                 <br>
                 <a href="#">
                 <span>customer email</span>
                 </a>
              </li>
              <li class="item">
                 <div class="icon-box">
                    <i class="fa fa-phone spacer"></i>
                 </div>
                 <strong>Call Now</strong>
                 <br>
                 <span>customer #</span>
              </li>
           </ul>
        </div>
     </div>
  </section>
<header class="navbar navbar-default">
   <div class="container">
      <div class="HeaderRow">
         <div class="col-md-12">
            <!-- header-right start -->
            <!-- ================ -->
            <div class="header-right clearfix">
               <!-- main-navigation start -->
               <!-- ================ -->
               <div class="main-navigation animated">
                  <!-- navbar start -->
                  <!-- ================ -->
                  <nav class="navbar navbar-default" role="navigation">
                     <div class="container-fluid">
                        <!-- Toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           </button>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="navbar-collapse-1">
                           <ul class="nav navbar-nav navbar">
                              <li class="active"><a href="index.html">Home</a></li>
                              <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Practice <span class="caret"></span></a>
                                 <ul class="dropdown-menu">
                                    <li><a href="about.html">About Dr. Eaton</a></li>
                                    <li><a href="#">Staff</a></li>
                                    <li><a href="#">Our Office</a></li>
                                    <li><a href="services.html">Services</a></li>
                                 </ul>
                              </li>
                              <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Education <span class="caret"></span></a>
                                 <ul class="dropdown-menu">
                                    <li><a href="education.html">Eye Education</a></li>
                                    <li><a href="covid19.html">Covid 19 Safety Plan</a></li>
                                 </ul>
                              </li>
                              <li><a href="#">Optical</a></li>
                              <li><a href="insurance.html">Insurances</a></li>
                              <li><a href="contact.html">Forms & Contact Us</a></li>                              
                           </ul>
                        </div>
                     </div>
                  </nav>
                  <!-- navbar end -->
               </div>
               <!-- main-navigation end -->
            </div>
            <!-- header-right end -->
         </div>
      </div>
   </div>
</header>

Answer 1

Reposting as an answer for that lucrative reputation...

You state that you are loading content into here:

<div id="header"></div>

It sounds like this is adding a new element into the DOM, which may break your CSS selector specifications if you're not ready for a div#header to appear in the middle of them. I'd look here first.

The other issue is that the DOM is going to be ready and the <header> will not have been loaded yet. You're then using jQuery to load new elements into the DOM, and those elements may still need to be initialized once the DOM has finished loading the new HTML.