.nm-slide-menu {
display: block;
}
.nm-slide-menu__backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity var(--nm-duration, 0.3s) ease;
z-index: 9998;
}
.nm-slide-menu__panel {
position: fixed;
top: 0;
height: 100vh;
width: var(--nm-panel-width, min(85vw, 320px));
max-width: 100vw;
z-index: 9999;
transition: transform var(--nm-duration, 0.3s) ease;
box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);
background: #fff;
}
.nm-slide-menu__panel[data-direction="left"] {
left: 0;
transform: translateX(-100%);
}
.nm-slide-menu__panel[data-direction="right"] {
right: 0;
transform: translateX(100%);
}
.nm-slide-menu.nm-slide-menu--open .nm-slide-menu__panel {
transform: translateX(0);
}
.nm-slide-menu.nm-slide-menu--open .nm-slide-menu__backdrop {
opacity: 1;
pointer-events: auto;
}
.nm-slide-menu__inner {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.nm-slide-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
flex: none;
min-height: 56px;
box-sizing: border-box;
}
.nm-slide-menu__logo {
display: block;
line-height: 0;
}
.nm-slide-menu__logo img {
display: block;
width: 110px;
height: auto;
max-width: 100%;
}
.nm-slide-menu__close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
line-height: 1;
font-size: 24px;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
}
.nm-slide-menu__close i {
display: inline-block;
}
.nm-slide-menu__toggle {
margin: 16px;
}
/* A trigger element (anywhere on the page, typically a native Bricks Toggle)
* marked with this class is hidden by default and only shown while this
* panel is open (nm-slide-menu.js adds/removes ".nm-slide-menu-open" on
* in its open()/close() functions). !important is needed because
* Bricks writes each element's own responsive "display" as an ID-selector
* rule, which otherwise always outranks a plain class selector like this. */
.nm-slide-menu-close-trigger {
display: none !important;
}
body.nm-slide-menu-open .nm-slide-menu-close-trigger {
display: flex !important;
}
/* Back bar (shown only in "slide" submenu mode, while drilled into a submenu) */
.nm-slide-menu__backbar {
display: none;
align-items: center;
gap: 10px;
padding: 12px 16px;
flex: none;
cursor: pointer;
font-weight: 600;
}
.nm-slide-menu__backbar-btn {
background: none;
border: none;
cursor: pointer;
color: inherit;
padding: 4px;
line-height: 1;
display: inline-flex;
}
.nm-slide-menu__backbar-arrow {
display: inline-block;
width: 9px;
height: 9px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
.nm-slide-menu__backbar-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nm-slide-menu__nav {
flex: 1;
position: relative;
overflow: hidden;
}
.nm-slide-menu__list,
.nm-slide-menu__list .sub-menu,
.nm-slide-menu__nav > .sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.nm-slide-menu__list li {
position: relative;
}
.nm-slide-menu__list a,
.nm-slide-menu__nav > .sub-menu a {
display: block;
padding: 14px 16px;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Whole row is clickable for items with a submenu (see nm-slide-menu.js) */
.nm-slide-menu__list li.menu-item-has-children {
cursor: pointer;
}
.nm-slide-menu__list li.menu-item-has-children > a {
pointer-events: none; /* click is handled on the itself, once, for the whole row */
}
/* --- Slide (drill-down) submenu mode ---
* JS flattens every .sub-menu out of its parent so it becomes a direct
* child of .nm-slide-menu__nav, a true sibling of the top-level list. That
* keeps every level's transform independent of the others (a transform on
* a parent would otherwise carry a still-nested child along with it, which
* is what caused levels to visually overlap/slide together). */
[data-submenu-mode="slide"] .nm-slide-menu__nav > ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
transition: transform var(--nm-duration, 0.3s) ease;
background-color: inherit;
}
[data-submenu-mode="slide"] .nm-slide-menu__nav > ul[data-nm-level-state="current"] {
transform: translateX(0);
z-index: 2;
}
[data-submenu-mode="slide"] .nm-slide-menu__nav > ul[data-nm-level-state="next"] {
transform: translateX(100%);
z-index: 1;
}
[data-submenu-mode="slide"] .nm-slide-menu__nav > ul[data-nm-level-state="prev"] {
transform: translateX(-100%);
z-index: 1;
}
.nm-slide-menu__submenu-toggle {
position: absolute;
right: 0;
top: 0;
width: 48px;
height: 48px;
background: none;
border: none;
cursor: pointer;
color: inherit;
pointer-events: none; /* purely decorative arrow; the row handles the click */
}
[data-submenu-mode="slide"] .nm-slide-menu__submenu-toggle span {
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: translate(-60%, -50%) rotate(45deg);
}
/* --- Accordion submenu mode (legacy, simpler; keeps natural DOM nesting) --- */
[data-submenu-mode="accordion"] .nm-slide-menu__list .sub-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
[data-submenu-mode="accordion"] .nm-slide-menu__list li.nm-submenu-open > .sub-menu {
max-height: 1000px;
}
[data-submenu-mode="accordion"] .nm-slide-menu__submenu-toggle span {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translate(-50%, -60%) rotate(45deg);
transition: transform 0.3s ease;
}
[data-submenu-mode="accordion"] li.nm-submenu-open > .nm-slide-menu__submenu-toggle span {
transform: translate(-50%, -40%) rotate(-135deg);
}
body.nm-slide-menu-open {
overflow: hidden;
}