Add Custom Links into Header-Menu

If you want to add Custom Links to your Bookstack Navigationbar / Header-Menu you need to use the Settings-Page from your Bookstack. 

 As Default it would look like this: 

 

 

 Lets Say you want to add a "Buy me a Coffee" Link for People to Support your work or whatever else you need to open the Bookstack "Settings-Page" from your Wiki and then open the "Customization" Tab, scroll to the Bottom of the Page and insert the following Code into the "Custom Code Section": 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- CUSTOM HEADER LINKS -->

<script>

document.addEventListener('DOMContentLoaded', function () {

 // Create the coffee icon using Font Awesome

 var coffeeIcon = document.createElement('i');

 coffeeIcon.className = 'fas fa-coffee'; // Font Awesome coffee icon class

 // Create the link element

 var top1Link = document.createElement('a');

 top1Link.href = 'https://yourwebsite.tld/yourlink';

 // Append the icon to the link

 top1Link.appendChild(coffeeIcon);

 // Add a space and the text after the icon

 top1Link.appendChild(document.createTextNode(' Buy me a Coffee'));

 var linksContainer = document.querySelector('.links.text-center');

 // Place the link in the correct position.

 linksContainer.insertBefore(top1Link, linksContainer.firstChild);

});

</script> 

 Please change the Icon and the Link to your Website ;) 

 

 The Result would look like this: