Container
You might want to wrap the side navigation menu within an
overlay container. This page shows some ways on how to
achieve this. All examples on this page have placed the
side menu toggle control within a HyperNav top navigation
menu. Additionally, the class .hn-no-hover has been
applied to all expand items, to fix unwanted hover toggles.
However, placing the side menu toggle control within a HyperNav
top navigation menu is not necessary.
Total Overlay Container
This container overlays all the content of a webpage. Note the class
.hn-side-container-fixed.
x
164
1
<nav class="hn-menu hn-top hn-fixed">2
<div class="hn-nav">3
<div class="hn-section hn-section-brand">4
<div class="hn-item">5
<a id="hn-logo" class="hn-link" href="#none">6
<span class="hn-icon hn-size-auto" style="padding-right: 0.4rem">7
<img src="https://cdn.acmion.com/acmion/assets/hyper-nav/icon.svg" style="height: 3rem">8
</span>9
<span class="hn-content">10
<strong style="font-weight: 600;">11
HyperNav12
</strong>13
</span>14
</a>15
</div>16
17
Top Offsetted Container
This container is offsetted so that it overlays everything except the
top navigation menu. Note the class .hn-side-container-top-offset on
both .hn-side-container and on its associated overlay.
xxxxxxxxxx1
164
1
<nav class="hn-menu hn-top hn-fixed">2
<div class="hn-nav">3
<div class="hn-section hn-section-brand">4
<div class="hn-item">5
<a id="hn-logo" class="hn-link" href="#none">6
<span class="hn-icon hn-size-auto" style="padding-right: 0.4rem">7
<img src="https://cdn.acmion.com/acmion/assets/hyper-nav/icon.svg" style="height: 3rem">8
</span>9
<span class="hn-content">10
<strong style="font-weight: 600;">11
HyperNav12
</strong>13
</span>14
</a>15
</div>16
17