In this video, I’ll be walking you through the process of building a header menu in Bricks. My aim through this video is to demystify the process of building a decent menu by not just using the tools available to us in Bricks Builder, but also improving them to get a simple, but powerful menu both for your desktop and mobile breakpoints.

Code Snippets in this video

Hide the Admin bar for mobile devices 
@media screen and (max-width: 782px) {
    html #wpadminbar {
        display: none;
    }
    html {
        margin-top: 0 !important;
    }

    body.bricks-is-frontend.admin-bar #brx-header.sticky {
        top: 0;
    }
}
Fix Dropdown multiple back btns 
.brx-dropdown-content > li:not(:first-child):has( > a.brx-multilevel-back)  {
    display: none
}
Page global CSS 
/*Styles for the secondary menu */

.brxe-dropdown[data-static] .brx-dropdown-content {
  display: block;
  visibility: visible;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--white);
  width: 100%;
  height: fit-content;
  min-height: 100%;
  transform: translateX(100%);
  padding-top: calc(var(--my-header-height) + var(--grid-gap));
  padding-inline: var(--gutter);
  transition-duration: 0.3s;
}

.brxe-dropdown[data-static] .open > .brx-dropdown-content,
.brxe-dropdown[data-static].open > .brx-dropdown-content {
  transform: translateX(0%);
}
Mobile-nav CSS 
%root% ul > li > a, %root% ul > li > .brx-submenu-toggle, %root% .dropdown-back {
  padding: var(--v-padding) var(--h-padding);
  color: var(--text-dark);
  width: 100%;
  transition-property: background-color, color;
  transition-duration: 0.3s;
  border-radius: var(--fr-card-radius);
  justify-content: space-between;
  background-color: transparent;

}

%root% ul > li > a:hover, %root% ul > li > .brx-submenu-toggle:hover, %root% .dropdown-back:hover {
  
  background-color: var(--action-ultra-light);
  color: var(--action-hover);
}

%root% ul > .brxe-dropdown {
  width: 100%;
}

%root% .brx-submenu-toggle > button > svg {
  rotate: -90deg;
}
Simulate button click 
<script>
  function simulateButtonClick(selector) {
    const targetButton = document.querySelector(selector);
    if (targetButton) {
        targetButton.click();
    } else {
        console.error(`Button with selector "${selector}" not found.`);
    }
}
</script>

Arguments

.mobile-nav .brx-submenu-toggle > button[aria-expanded="true"]
interactions settings

Skip the hassle. Get the Multilevel Header Menu on your website as quickly as you can click "upload".

I want this!

Leave the first comment