Boa tarde, eu estou fazendo um site apênas com Html5 e Css3 puro e nele tem um menu, porem eu quero que esse menu fique fixo em todas as outras paginas e então para não precisar copiar e colar o código em todas as paginas eu decidi usar um pouco de Java Script, porem ao abrir as outras paginas (sem ser o Index que foi a pagina que o menu foi feito) o browser não carrega e exibe uma mensagem de erro.
Segue abaixo a imagem do erro que está aparecendo no browser.
Ao abrir o site em um servidor local ele "bulga" todo o menu e não aplica a formatação do Css que era para ocorrer, sem contar que nas outras paginas o menu nem sequer aparece.
Foto do menu como era para realmente aparecer
O código abaixo é referente ao menu feito em Html
<body>
<div class="container">
<div class="item1 bg-color-item1">
<ul class="texto">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="github.html">Github</a>
</li>
<li>
<a href="#linkedin">Linkedin</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
O codigo abaixo é referente ao menu estilizado com Css
ul {
display: flex;
box-sizing: border-box;
text-decoration: none;
justify-content: space-around;
padding: 18px 400px;
}
li {
display: inline-block;
font-family: 'Oswald';
padding: 5px 0px;
}
.bg-color-item1{
background-color: rgb(65, 63, 63);
}
.item1 {
position: fixed;
color: aliceblue;
border-bottom: solid 5px rgb(67, 139, 233);
width: 100%;
}
a {
text-decoration: none;
color: #eee;
font-size: 20px;
}
.item1 a {
padding: 10px;
}
.item1 a:hover {
box-sizing: border-box;
background-color: rgb(67, 139, 233);
margin: 15px;
transition: 0.5s;
}
Segue abaixo o código em Java Script
window.onload = function () {
var template = `
<body>
<div class="container">
<div class="item1 bg-color-item1">
<ul class="texto">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="github.html">Github</a>
</li>
<li>
<a href="#linkedin">Linkedin</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
</body>
`;
document.getElementById("header").innerHTML = template;
}
Obrigado desde já !
Parte do html onde eu chamo o js
<body>
<div id="header"></div>
<div class="container">
<div class="main">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front giovanni">
<img src="img/giovanni.jpg" alt="Giovanni">
</div>
<div class="flip-card-back">
<h1 class="text-flip-card">Nome: </h1>
<h4 class="text-flip-card">Idade: </h4>
<h4 class="text-flip-card">Sexo: </h4>
<h4 class="text-flip-card">Estado civil: </h4>
</div>
</div>
</div>
</div>
<div class="texto sombra-texto">
<p>
</p>
</div>
</div>
<script type="module" src="./header.js"></script>
header
? Vc está chamando o header.js dentro do <head> ou no final do documento (digo no final do body)?