Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add top bottom navbar toggle

Browse Source
This commit is contained in:
Jeremy Thomas
2017-10-24 12:23:31 +01:00
parent 0e6e22e70a
commit c0639cde83
13 changed files with 326 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/documentation/components/navbar.html
View File

@@ -8,7 +8,7 @@ doc-subtab: navbar
{% include subnav-components.html %}
{% capture navbar_example %}
{% include navbar.html id="bd-example" %}
{% include examples/navbar.html id="Default" %}
{% endcapture %}
{% capture navbar_brand_example %}
@@ -132,7 +132,7 @@ doc-subtab: navbar
{% endcapture %}
{% capture navbar_transparent_example %}
{% include navbar.html transparent=true boxed=true id="TransparentExample" %}
{% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
{% endcapture %}
{% capture navbar_dropdown_example %}
@@ -751,6 +751,43 @@ document.addEventListener('DOMContentLoaded', function () {
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
{% include anchor.html name="Fixed navbar" %}
{% include elements/new-tag.html version="0.6.1" %}
<div class="content">
<p>
You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
</p>
<ul>
<li>
Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
{% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
</li>
<li>
Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to the <code>&lt;html&gt;</code> element to provide the appropriate padding to the page
{% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
</li>
</ul>
</div>
<h4 class="title is-5">Try it out!</h4>
<div id="navbarToggles" class="buttons">
<a id="navbarFixTop" class="button is-link">
<span class="icon">
<i class="fa fa-square-o"></i>
</span>
<span>Fix top navbar</span>
</a>
<a id="navbarFixBottom" class="button is-link">
<span class="icon">
<i class="fa fa-square-o"></i>
</span>
<span>Show bottom navbar</span>
</a>
</div>
{% include anchor.html name="Dropdown menu" %}
<div class="content">