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>
header.html? Please provide a minimal, reproducible example of your problem so we can see all the parts needed to reproduce and fix the problem.div#headerabove the<header>? Do you have to (re)initialize the jQuery plugin after you load new content into the DOM? This question appears to be missing important details. Can you simplify the example?