I was wondering if there was an argument I could add to my _site.yaml
file so that the rendered nav would have class = nav nav-tabs
for formatting by Bootstrap (like this).
I thought there was a class:
argument I could add under the navbar:
section, or something like that, but I can't seem to find any documentation.
Here's what my current _site.yaml
looks like, if that's relevant:
name: "my-website"
output_dir: docs
navbar:
title: "My Website"
left:
- text: "Home"
icon: fa-house
href: index.html
- text: "About"
icon: fa-circle-info
href: about.html
output:
html_document:
css: custom.css
includes:
in_header: header.html
after_body: footer.html
Not as streamlined as I was hoping, but this worked.
I modified my _site.yaml
like so:
name: "my-website"
output_dir: docs
output:
html_document:
css: custom.css
includes:
in_header: _header.html
before_body: _navbar.html
after_body: _footer.html
And added a nav-tabs
class to the ul
in my _navbar.html
code (from the RMarkdown Website GitHub):
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- NOTE: add "navbar-inverse" class for an alternate navbar background -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">RMarkdown Website</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav-tabs">
<li><a href="index.html">Home</a></li>
<li><a href="PageA.html">Page A</a></li>
<li><a href="PageB.html">Page B</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com">GitHub</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->