javascript - CSS/JS won't work if I include the header -
here index.html file
<!doctype html> <html> <head> <meta charset=utf-8> <title>title</title> <meta name=viewport content="width=device-width, initial-scale=1"> <meta http-equiv=x-ua-compatible content="ie=edge"> <link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/> <link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/> <link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/> <link rel=stylesheet type=text/css href="assets/css/style.css"/> </head> <body> <div id="inc"></div> <div class=main-container> <section class="no-pad coming-soon fullscreen-element"> </section> </div> <script src=assets/js/jquery.min.js></script> <script src=assets/js/bootstrap.min.js></script> <script src=assets/js/smooth-scroll.min.js></script> <script src=assets/js/scripts.js></script> <script> $(function(){ $("#inc").load("header.html"); }); </script> </body> </html> if copy-paste content of header.html page after body, works fine.
when tried include header.html page using .load() function css won't work properly.
here online sample codepen
if include content of div="inc" external file header.html drop-down menu overlap each other.
hope helps.
your scripts.js file contains
$(window).load(function(){ "use strict"; // align elements vertically alignvertical(); alignbottom(); $(window).resize(function(){ alignvertical(); alignbottom(); }); // isotope projects }); the scripts.js file have provided trying add styling header.html.
but it's not doing expected behaviour because scripts.js file loading before header.html file.
just add @ end after header content
<script src=assets/js/scripts.js></script> this let header.html content load first , scripts.js
also here github repo code structure
Comments
Post a Comment