Header Links

1. Add a new link by inserting the specific code snippet:

Each link should have it’s own id name, which you can use for assigning styles to your links. text attribute will be rendered as visible name of the link on the page.

<script>
  $(document).ready(function(){
    var ul = $("div.navbar-collapse > ul.nav.navbar-nav");
    var url = "https://www.example.com/about";
    var text = "New Link";
    ul.append('<li id="new-link"><a href="' + url + '">' + text + '</a></li>');
  });
</script>

Save the story and check the changes in View mode.

2. Removing a link

If your story already has links in the Header, and you want to remove them, you can use this snippet (uses jQuery syntax):

<script>
  $(document).ready(function(){
      var ul = $("div.navbar-collapse > ul.nav.navbar-nav > li.navigation-link");
      ul.remove();
  })
</script>

The building blocks of any Fabl story can be broken down into three main categories: