This Walkthrough is about creating a responsive Bricks Builder Mega Menu from start to finish. Follow along with Nicholas Arce who will show you the best SCSS practices using the WP Code Box plugin. It’s like building a Lego house, where each brick is a crucial part of the structure. As it is an extensive tutorial, we have summarized each chapter for you. Let’s get started.
1. Planning Out Our Bricks Builder Mega Menu
Before we start, it’s essential to have a clear plan in mind. Just like an architect wouldn’t start building without a blueprint, we shouldn’t start coding without a clear structure. So, let’s first sketch out what we want our mega menu to look like and how we want it to behave.
- What elements do we want to include?
- How should they be arranged?
- How should the menu behave on different devices?
Once we have a clear plan, we can start building our mega menu.
2. Building Mobile Layout in Bricks
First up is the mobile layout. In the Bricks Builder, we’ll create a new layout specifically for mobile devices. We’ll add all the elements we want in our mega menu, such as link lists and featured links.
- Open the Bricks Builder and create a new layout.
- Add the elements you want in your mega menu.
- Arrange them in the order you want them to appear.
Remember, we’re building a mega menu, so don’t be afraid to add as many elements as you need!
3. Setting Breakpoint CSS
With the mobile layout in place, we’ll set the CSS breakpoints. Breakpoints are like traffic lights for your website. They tell your site when to change its layout based on the screen size.
In our SCSS file, we’ll define the breakpoints for different screen sizes. Then, we’ll use these breakpoints to adjust the layout and style of our mega menu for each screen size.
4. Mobile Menu Open CSS
It’s time to make our mega menu interactive. We’ll add some CSS to make the menu open when a user clicks on it.
In our SCSS file, we’ll add some CSS rules to change the display property of our mega menu from ‘none’ to ‘block’ when a user clicks on the menu button. This will make the menu appear on the screen.
5. Adding Slide In Animation
To make our mega menu even more engaging, let’s add a slide-in animation. This will make the menu slide in from the side of the screen when a user opens it.
In our SCSS file, we’ll add some keyframes to create the slide-in animation. Then, we’ll apply this animation to our mega menu.
6. Mobile Mega Menu Content Slide Over
Let’s make the content of our mega menu slide over when a user opens it. This will create a sense of depth and make the menu more engaging.
In our SCSS file, we’ll add some CSS rules to move the content of our mega menu to the right when a user opens the menu. This will create the slide over effect.
7. Mobile Top Nav Styling
We’ll style the top navigation bar of our mega menu next. We’ll change the background color, adjust the padding, and modify the font size to make it look just right.
In our SCSS file, we’ll add some CSS rules to style the top navigation bar. We can use the SCSS variables to make our code more maintainable and easier to read.
8. Mobile Close and Back Button Calculations
Let’s add a close button and a back button to our mega menu. We’ll also add some CSS to position these buttons correctly.
In our SCSS file, we’ll add some CSS rules to create the close button and the back button. Then, we’ll use CSS calculations to position these buttons in the top right corner of our mega menu.
9. Completing Top Mobile Nav
With the close and back buttons in place, we can complete the top navigation bar of our mega menu. We’ll add the final touches, such as adjusting the spacing, aligning the elements, and adding some hover effects.
In our SCSS file, we’ll add some CSS rules to finalize the styling of the top navigation bar. We’ll also add some CSS transitions to create smooth hover effects.
10. ALERT: Special change to Icon Size Calc
At this point, we might notice that the size of our icons is not quite right. No worries, we can easily fix this by adjusting the CSS calculations for the icon size.
In our SCSS file, we’ll modify the CSS rules for the icon size to make the icons look just right.
11. Bottom Portion of Mobile Nav
Moving on to the bottom portion of our mega menu, we’ll adjust the background color, change the font size, and add some padding to make it look perfect.
In our SCSS file, we’ll add some CSS rules to style the bottom portion of our mega menu.
12. Removing Overflow on Mobile Mega Menu Content
A common issue with mega menus is content overflow. We’ll add some CSS to hide the overflow and make our mega menu look neat and tidy.
In our SCSS file, we’ll add a CSS rule to set the overflow property of our mega menu content to ‘hidden’. This will hide any content that goes outside the boundaries of our mega menu.
13. Removing Scrollbar On Mobile Mega Menu Content
Let’s remove the scrollbar from our mega menu content. This will make our mega menu look cleaner and more streamlined.
In our SCSS file, we’ll add a CSS rule to set the overflow property of our mega menu content to ‘auto’. This will remove the scrollbar but still allow users to scroll through the content if it’s too long to fit on the screen.
14. IMPORTANT: Fixing Bricks Calculations for Mega Menu
At this point, we might notice that the calculations for our mega menu are not quite right. This is a common issue when working with Bricks, but we can easily fix it.
In our SCSS file, we’ll adjust the CSS calculations for our mega menu to make sure everything is positioned and sized correctly.
15. Button and Dropdown Accessibility
Accessibility is key in web design. We’ll add some ARIA attributes to our buttons and dropdowns to make them accessible to screen readers.
In our HTML, we’ll add the ‘aria-haspopup’ and ‘aria-expanded’ attributes to our buttons and dropdowns. This will tell screen readers that these elements can open a popup and whether the popup is currently open or closed.
16. Styling Everything for My Use Case
Let’s customize the styling of our mega menu to fit our specific use case. We’ll adjust the colors, fonts, and spacing to match our brand identity.
In our SCSS file, we’ll modify the CSS rules for our mega menu to match our specific styling preferences.
17. Turning Last Nav Link to Button
We’ll turn the last navigation link into a button next. This can be a great way to highlight a specific action, such as signing up or logging in.
In our HTML, we’ll change the last navigation link to a button. Then, in our SCSS file, we’ll add some CSS rules to style this button.
18. Mobile Last Link Button
We’ll make sure our last link button looks good on mobile devices. We’ll adjust the size, position, and styling of the button for smaller screens.
In our SCSS file, we’ll add some CSS rules to adjust the styling of our last link button for mobile devices.
19. Setting Mega Menu Dropdown Width
We’ll set the width of our mega menu dropdown next. We’ll add some CSS to make the dropdown as wide as the navigation bar.
In our SCSS file, we’ll add a CSS rule to set the width of our mega menu dropdown to 100%.
20. Styling Mega Menu Dropdown
We’ll style our mega menu dropdown next. We’ll adjust the background color, add some padding, and change the font size to make it look just right.
In our SCSS file, we’ll add some CSS rules to style our mega menu dropdown.
21. Fade Up Desktop Mega Menu Effect
Let’s add a fade-up effect to our mega menu. This will make the menu appear to fade in and move up slightly when a user opens it.
In our SCSS file, we’ll add some keyframes to create the fade-up animation. Then, we’ll apply this animation to our mega menu.
22. Adding Our Content
We’re ready to add our content to the mega menu. We’ll add the text for each link, add the images for the featured links, and add any other content we want in our mega menu.
In our HTML, we’ll add the content for each element in our mega menu.
23. Styling Menu Content For Desktop
We’ll style our menu content for desktop devices next. We’ll adjust the font size, change the colors, and add some padding to make the content look perfect on larger screens.
In our SCSS file, we’ll add some CSS rules to style our menu content for desktop devices.
Here is the code snippet you can use:
@mixin clickable--parent($child-element) {
position: relative;
// add focus ring to parent element and remove from child.
&:has(:focus-visible) {
// MAKE SURE THIS STYLING MATCHES YOUR WEBSITE
outline-style: solid;
outline-color: var(--action);
outline-width: 0.2rem;
outline-offset: 0.25em;
}
//child styling
#{$child-element} {
outline: none !important;
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer !important;
display: flex;
}
&:has(> a) {
> a:focus {
outline: none !important;
}
}
}
}
// Example Usage
// I want the clickable area of my .btn--action within my .blog-card to expand the full size of .blog-card
//HTML
<div class="blog-card">
<a class="btn--action">Button</a>
</div>
//CSS
// .blog-card {
@include clickable--parent('.btn--action');
// }
Source: Snippet Codes
24. Styling Mobile Mega Menu Content
We’ll style our menu content for mobile devices next. We’ll adjust the font size, change the colors, and add some padding to make the content look perfect on smaller screens.
In our SCSS file, we’ll add some CSS rules to style our menu content for mobile devices.
Mega Menu Bricks Builder Conclusion
And that’s it! We’ve built a fully responsive Bricks Builder Mega Menu using SCSS. It’s like we’ve built a Lego house, brick by brick, and now we can enjoy the result of our hard work.
Remember, the key to building a great mega menu (or any other web element) is to plan ahead, take it step by step, and always test your work on different devices. And most importantly, have fun with it!
