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 = () => {
menuToggle.click()
}
if (window.matchMedia('(max-width:768px)').matches) {
menuItemLinks.forEach(link => {
link.addEventListener('click', (event) => {
handleClick();
})
})
}
CSS
@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;
}
}
Source: https://designwithcracka.com/code/better-mobile-menu-codes/
