I have a small website (Ubuntu, Apache2, PHP) and every page on this website has a similar content: The name of the website on the top, the navigation bar, some contact information, like my e-mail, and so on. Is there any way to add these elements through CSS? So that I only have to include this CSS file and I have the title on my page? Here's a example:
#navigation {
position: -webkit-sticky;
position: sticky;
top: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id=navigation>
<nav>
<a href="/somePage.html">Some page</a>
<br>
<a href="mailto:test@example.org">Contact admin</a>
</nav>
<h1>Title</h1>
</div>
Some long test to see, that the navigation bar is sticky
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>And I want that this navigation bar appears on every new page if I just include the CSS file. I tried with the following code:
body:before {
content: "<nav>[Content]</nav>";
}
but it seems like this can only add text. Maybe you could achieve this with JavaScript? But if yes how?
You can create a small webcomponent that outputs exactly that:
const template = document.createElement('template');
template.innerHTML = `<div>
<nav>
<a href="/somePage.html">Some page</a>
<br>
<a href="mailto:test@example.org">Contact admin</a>
</nav>
<h1>Title</h1>
</div>`;
class MyWebsiteHeader extends HTMLElement {
constructor() {
super();
this.appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-website-header', MyWebsiteHeader);#navigation {
position: -webkit-sticky;
position: sticky;
top: 0;
}<my-website-header id="navigation"></my-website-header>
Some long test to see, that the navigation bar is sticky
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
gdfgdfgdfg
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> Hi!Here's a version that completely replaces the web component with your HTML:
const template = document.createElement('template');
template.innerHTML = `<div id="navigation">
<nav>
<a href="/somePage.html">Some page</a>
<br>
<a href="mailto:test@example.org">Contact admin</a>
</nav>
<h1>Title</h1>
</div>`;
class MyWebsiteHeader extends HTMLElement {
constructor() {
super();
this.outerHTML = template.innerHTML;
}
}
customElements.define('my-website-header', MyWebsiteHeader);#navigation {
position: -webkit-sticky;
position: sticky;
top: 0;
}<my-website-header></my-website-header>
Some long test to see, that the navigation bar is sticky
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
gdfgdfgdfg
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> Hi!