The headroom plugin allows you to hide the navbar while scrolling down and then reappear when you scroll up. It can also be customised to look different when pinned vs unpinned.
<nav class="navbar sticky top-0 bg-white" id="navbar" data-toggle="headroom">
<div class="container">
<a class="navbar-brand" href="#">
<img width="30" height="" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/2f7d47af-ad93-480c-a98c-5085f3c724c8.png" />
<span>Ipsum</span>
</a>
<button class="navbar-btn" data-toggle="collapse" data-target="#navbar-row" aria-expanded="false" aria-label="Toggle navigation">
<div class="h-1 mt-3 rounded-full bg-primary"></div>
<div class="h-1 mt-1 rounded-full bg-primary"></div>
<div class="h-1 mt-1 rounded-full bg-primary"></div>
</button>
<div class="navbar-row" id="navbar-row">
<ul class="navbar-col"></ul>
<ul class="navbar-col"></ul>
<ul class="navbar-col">
<li>
<a class="btn btn-ghost btn-primary btn-link-primary" href="/#">Pricing</a>
</li>
<li>
<a class="btn btn-ghost btn-primary btn-link-primary" href="#">Login</a>
</li>
<li>
<a class="btn btn-primary" href="#">Get Started Now</a>
</li>
</ul>
</div>
</div>
</nav>