May 22, 2023

How to Enhance Bricks Builder Mobile Navigation

Play Video

What is the Tutorial About?

Learn how to enhance Bricks Builder mobile navigation experience on your WordPress website. The tutorial addresses a common issue with mobile navigation – the default menu covering the logo and call-to-action button, which can hinder user experience and accessibility. The solution presented by Design with Cracka is a simple yet effective mobile menu that opens below the header, ensuring all navigation items, including the logo (home button) and call-to-action, are visible when the menu is open. Furthermore, the menu closes automatically when a menu item is clicked, providing a smooth and user-friendly navigation experience.

Use Cases for this Tutorial

  • Website Redesign:
    If you’re planning to redesign your WordPress website for better user experience, this tutorial can guide you in improving your mobile navigation.
  • Accessibility Improvement:
    For those looking to enhance the accessibility of their website, this tutorial provides a solution to make all navigation items visible when the menu is open.
  • Mobile-First Design:
    For developers and designers focusing on mobile-first design, this tutorial offers a way to optimize mobile navigation.
  • User Experience Enhancement:
    If you’re aiming to improve the overall user experience of your website, the mobile menu solution in this tutorial can contribute to a smoother and more user-friendly navigation.

Required Code

Java Script

const menuItemLinks = document.querySelectorAll('.menu-item a');
const menuToggle = document.querySelector('.bricks-mobile-menu-toggle')

const handleClick = () => {

if (window.matchMedia('(max-width:768px)').matches) {

    menuItemLinks.forEach(link => {

        link.addEventListener('click', (event) => {



@media (max-width:768px){
#bmm .bricks-mobile-menu-wrapper {
margin-top: var(--header-height);
padding-bottom: var(--header-height)

#bmm ul,
#bmm ul a{
    width: 100%

#bmm .bricks-mobile-menu-toggle{
    margin-bottom: 10px;

#bmm .bricks-mobile-menu-overlay{
    display: none;



Required Resources

Bricks Builder Logo
Payment required
Credit to Design with Cracka
Design with Cracka is an engaging YouTube channel offering insightful web design and development tutorials, tips, and tricks. Catering to a range of skill levels, from beginners to advanced developers, Design with Cracka focuses on creating beautiful, functional, and optimized websites using various platforms, including WordPress, Oxygen Builder, and Bricks Builder.
How to Enhance Bricks Builder Mobile Navigation
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.