An experimental nav bar with a nifty hamburger animation. Leverages a SoulMagic click event and a custom-made burger icon.
Share on:
<soulmagic id="burger" users=".burger-parent">
<set targets=".mobile-nav-panel">
<opacity>0</opacity>
<clip-path>inset(0% 0% 0% 100%)</clip-path>
</set>
<set targets=".topline">
<opacity>1</opacity>
<transform-origin>left</transform-origin>
</set>
<set targets=".bottomline">
<transform-origin>left</transform-origin>
</set>
<set targets="li">
<opacity>0</opacity>
<x-percent>10</x-percent>
<backface-visibility>hidden</backface-visibility>
</set>
<event type="click" trigger="button" away=".mobile-nav-panel"></event>
<!-- IN TIMELINE -->
<timeline>
<to targets=".topline" position="0">
<rotation>45</rotation>
<y>-1</y>
<x>4</x>
<duration>.4</duration>
</to>
<to targets=".midline" position="0">
<opacity>0</opacity>
<x-percent>-100</x-percent>
<duration>.4</duration>
</to>
<to targets=".bottomline" position="0">
<rotation>-45</rotation>
<y>1</y>
<x>4</x>
<duration>.4</duration>
</to>
<to targets=".overlay" scope="html" position="0">
<opacity>1</opacity>
<duration>.4</duration>
</to>
<to targets=".mobile-nav-panel" position="-=.3">
<opacity>1</opacity>
<duration>.4</duration>
<clip-path>inset(0% 0% 0% 0%)</clip-path>
</to>
<to targets="li" position="-=.3">
<opacity>1</opacity>
<x-percent>0</x-percent>
<rotation>.01</rotation>
<stagger>.1</stagger>
</to>
</timeline>
<!-- OUT TIMELINE -->
<timeline>
<to targets=".topline" position="0">
<rotation>0</rotation>
<y>0</y>
<x>0</x>
<duration>.2</duration>
</to>
<to targets=".midline" position="0">
<opacity>1</opacity>
<x-percent>0</x-percent>
<duration>.2</duration>
</to>
<to targets=".bottomline" position="0">
<rotation>0</rotation>
<y>0</y>
<x>0</x>
<duration>.2</duration>
</to>
<to targets=".overlay" scope="html" position="0">
<opacity>0</opacity>
<duration>.4</duration>
</to>
<to targets=".mobile-nav-panel" position="0">
<opacity>0</opacity>
<clip-path>inset(0% 0% 0% 100%)</clip-path>
<duration>.3</duration>
<ease>power2.in</ease>
</to>
<to targets="li" position="0">
<opacity>0</opacity>
<x-percent>10</x-percent>
<stagger>.05</stagger>
</to>
</timeline>
</soulmagic>
<!-- .nava -->
<div class="nava // fixed-ob left-0 top-0 // w-full p--sm z-10 // bg-p-900 text-p-50">
<div class="flex items-center justify-between // max-w--doc">
<!-- .logo -->
<div class="logo">
<a href="/">Logo / Company</a>
</div>
<!-- .globalnav -->
<div class="globalnav // hidden lg:block // dropdown-parent">
<button>Menu</button>
</div>
<!-- .mobilenav -->
<div class="mobilenav // lg:hiddenx // burger-parent">
<!-- .burger -->
<button class="burger // relative flex flex-col // inline-block z-50" style="width:25px; height:18px">
<span class="absolute block w-full h-2px bg-p-50 // topline" style="top:0px;"></span>
<span class="absolute block w-full h-2px bg-p-50 // midline" style="top:8px;"></span>
<span class="absolute block w-full h-2px bg-p-50 // bottomline" style="top:16px"></span>
</button>
<div class="overlay // absolute top-0 left-0 // w-full h-screen bg-p-900 bg-opacity-80 z-10 opacity-0"></div>
<!-- .mobile-nav-panel -->
<div class="absolute top-0 left-0 // flex items-center // w-full h-screen px-doc // bg-p-900 z-10 mobile-nav-panel">
<nav>
<ul class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tight text-a-200 space-y-4" style="line-height:1">
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">Schmontact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div><soulmagic id="burger" users=".burger-parent">
<set targets=".mobile-nav-panel">
<opacity>0</opacity>
<clip-path>inset(0% 0% 0% 100%)</clip-path>
</set>
<set targets=".topline">
<opacity>1</opacity>
<transform-origin>left</transform-origin>
</set>
<set targets=".bottomline">
<transform-origin>left</transform-origin>
</set>
<set targets="li">
<opacity>0</opacity>
<x-percent>10</x-percent>
<backface-visibility>hidden</backface-visibility>
</set>
<event type="click" trigger="button" away=".mobile-nav-panel"></event>
<!-- IN TIMELINE -->
<timeline>
<to targets=".topline" position="0">
<rotation>45</rotation>
<y>-1</y>
<x>4</x>
<duration>.4</duration>
</to>
<to targets=".midline" position="0">
<opacity>0</opacity>
<x-percent>-100</x-percent>
<duration>.4</duration>
</to>
<to targets=".bottomline" position="0">
<rotation>-45</rotation>
<y>1</y>
<x>4</x>
<duration>.4</duration>
</to>
<to targets=".overlay" scope="html" position="0">
<opacity>1</opacity>
<duration>.4</duration>
</to>
<to targets=".mobile-nav-panel" position="-=.3">
<opacity>1</opacity>
<duration>.4</duration>
<clip-path>inset(0% 0% 0% 0%)</clip-path>
</to>
<to targets="li" position="-=.3">
<opacity>1</opacity>
<x-percent>0</x-percent>
<rotation>.01</rotation>
<stagger>.1</stagger>
</to>
</timeline>
<!-- OUT TIMELINE -->
<timeline>
<to targets=".topline" position="0">
<rotation>0</rotation>
<y>0</y>
<x>0</x>
<duration>.2</duration>
</to>
<to targets=".midline" position="0">
<opacity>1</opacity>
<x-percent>0</x-percent>
<duration>.2</duration>
</to>
<to targets=".bottomline" position="0">
<rotation>0</rotation>
<y>0</y>
<x>0</x>
<duration>.2</duration>
</to>
<to targets=".overlay" scope="html" position="0">
<opacity>0</opacity>
<duration>.4</duration>
</to>
<to targets=".mobile-nav-panel" position="0">
<opacity>0</opacity>
<clip-path>inset(0% 0% 0% 100%)</clip-path>
<duration>.3</duration>
<ease>power2.in</ease>
</to>
<to targets="li" position="0">
<opacity>0</opacity>
<x-percent>10</x-percent>
<stagger>.05</stagger>
</to>
</timeline>
</soulmagic>
<!-- .nava -->
<div class="nava // fixed-ob left-0 top-0 // w-full p--sm z-10 // bg-p-900 text-p-50">
<div class="flex items-center justify-between // max-w--doc">
<!-- .logo -->
<div class="logo">
<a href="/">Logo / Company</a>
</div>
<!-- .globalnav -->
<div class="globalnav // hidden lg:block // dropdown-parent">
<button>Menu</button>
</div>
<!-- .mobilenav -->
<div class="mobilenav // lg:hiddenx // burger-parent">
<!-- .burger -->
<button class="burger // relative flex flex-col // inline-block z-50" style="width:25px; height:18px">
<span class="absolute block w-full h-2px bg-p-50 // topline" style="top:0px;"></span>
<span class="absolute block w-full h-2px bg-p-50 // midline" style="top:8px;"></span>
<span class="absolute block w-full h-2px bg-p-50 // bottomline" style="top:16px"></span>
</button>
<div class="overlay // absolute top-0 left-0 // w-full h-screen bg-p-900 bg-opacity-80 z-10 opacity-0"></div>
<!-- .mobile-nav-panel -->
<div class="absolute top-0 left-0 // flex items-center // w-full h-screen px-doc // bg-p-900 z-10 mobile-nav-panel">
<nav>
<ul class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tight text-a-200 space-y-4" style="line-height:1">
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">Schmontact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Ready to use this component in your Beaver Builder sites?
Copy the snippet from the Code tab (above) into a SoulSections module with SoulMagic also installed. That’s it.
Need the Soul Plugins? Get the bundle.