The only thing we're adding right now is the menu bar, nothing else. This small tutorial shows how to quickly rebuild a theme.
- Rename current 'theme' folder to 'theme_backup'
- Copy/paste latest theme from Gitbook repo
- Copy the
custom.css
and images from 'theme_backup' to 'theme' - Add
custom.css
AFTERstyle.css
to the proper page to load it (search forstyle.css
in 'theme' folder) - Add
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,700,400italic' rel='stylesheet' type='text/css'>
beforestyle.css
- Add
<link rel="stylesheet" href="http://www.nooku.org/css/header.css">
aftercustom.css
- Add the following right after
app.js
:
<script>
responsivemenu.init({
wrapper: document.querySelector('.header'),
toggleclass: 'button--hamburger',
togglecontent: 'menu <span class="lines"></span>'
});
</script>
- Add markup to the right file (currently
page.html
). Add it just before<div class="book"></div>
- Add
class="no-js"
to<body>
- Add following right below
<body class="no-js">
:<script data-inline type="text/javascript">function hasClass(e,t){return e.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))}var el=document.body;var cl="no-js";if(hasClass(el,cl)){var reg=new RegExp("(\\s|^)"+cl+"(\\s|$)");el.className=el.className.replace(reg," js-enabled")}</script>
- Run
gitbook serve
and test if menu is working (mobile first) - On success remove theme_backup