Great tut. Its mind blowing that there are no real styling options for mobile menus in bricks. Man its 2024! 60% of all Internet traffic coming from mobile devices, nobody gives a damn about how your website looks on desktop anymore. MOBILE FIRST!
Since the element styled by the css is not visible on page load, the css should be in the footer to reduced render blocking (waiting for css to load before loading DOM contents)
Great video as usual! The following CSS placed on the Nav Menu also has the effect of keeping the menu clear of the Nav container on mobile (courtesy of Thomas @ Bricks) root > nav.bricks-mobile-menu-wrapper.right{ position: absolute; top: 100%; }
Thanks, have you tested that this works properly? I'm asking because this appears to be a solution for a specific configuration, will not work if the menu is sliding in from the left.
@@DesignwithCracka Hi there , yes you are right i am using Mobile Menu > Position > Right - can confirm, it works with that - think it would just be: root > nav.bricks-mobile-menu-wrapper.left{ ...etc in your use case.
@@DesignwithCracka After a bit more too-and fro with Thomas - this was the eventual solution. It resolved issues with overflow Should be ok with ...wrapper.left{ too. root > nav.bricks-mobile-menu-wrapper.right{ position: absolute; top: 100%; height: calc(var(--bricks-vh, 1vh)*100 - 100%); transform: none; }
Why in mobile they're always has to be a menu bar toggle?, surely from ux/ui point of view, usability is paramount to get from A/B quickly. Make the mobile menu fixed to bottom of screen like an app menu.
Great video, a little bit tricky for myself, but very instructive. Glad you joint Kevin Geary, you have the right instructor speech pace, i'll probably join next month and use your affiliate link, cause you deserve it. It will be good, if you could reach the same agreement with Breakdance, to be a seasonal instructor, cause they lack desperately informative in-depth tutorial.
Wow, this tutorial dives deep into customizing the mobile menu using Bricks! It's impressive how detailed and thorough the instructor is in explaining each step, from setting up the header template to tweaking CSS variables for responsiveness. The use of automatic CSS and the rationale behind changing the logo implementation for better mobile usability are particularly insightful. The JavaScript integration to enhance user interaction by ensuring the menu closes smoothly on click adds a professional touch. Overall, this tutorial not only teaches how to implement a practical solution but also emphasizes the importance of user experience in web design. Great job!
external URL simply means custom URL, at least the way bricks does it, because there's no option to manually add your URL except you choose external URL. No it won't open in new tab unless you specify. Using internal page means that you can't use that relative link to the home page, if you choose a specific page, say you current homepage, if for any reason your home page changes, that link will be broken. N/B there is nothing like 'eternal URL' in HTML, it's only defined by purpose, not by HTML semantics.
Glad you joined the inner circle!!! After all, the "unofficial" circle of great tutors around Bricks / Oxygen is not as big as it seems at first glance...so I'm looking forward to more great videos from you and this new collaboration! Thanks to you and Kevin, my skills have improved enormously :)
As usual excellent 👌👌👌 I didn't have enough time to watch it all, but please make another tutorial on how to use the new mobile menu builder and also the desctop. I'm looking to see the best way to make the menu for more complex woo websites where we have product categories alongside the main menu and also mini cart and those stuffs. I'm waiting for these things for a long time ...
Sorry, but a "section" should NEVER be used in header / menu! "Section" is for separating / grouping "content" of a website. And the issue of an off canvas menu blocking your logo and cta? You simply design your off canvas menu.. WITH the logo (linked to home) and put that at the top of your off canvas menu lol. Along with your mobile footer with social links, copyright, etc. at the bottom.. simple.
1. No section was used here, because once you change the tag it’s no longer a section. But saying ‘NEVER’ isn’t accurate, because section CAN be used in a header as a valid html5 structure depending on the need to do so. A header can contain a sectioning element. 2. Designing your own off canvas is also an option, but for a simple menu like this, you end up duplicating things which is avoided by this method, and saves time, too.
This is great, thanks Cracka! Only issue I noticed - when the mobile menu is open, the page is still scrollable. If you scroll, you'll see the header move away. I'll try to fix it with some JS.
@@DesignwithCracka didn't use the JS code. Tried but there are some errors, don't know why. Without the JS, so only with CSS, the back action behaves like I wrote above. Might be a conflict on my side though. But if it works well on your end, then I did something wrong or there is a code overlapping somewhere
Thank you very much, Is there a particular reason why one wouldn't just put the header div on a higher z-index level in order to cover the slide-in menu?
Great tut.
Its mind blowing that there are no real styling options for mobile menus in bricks. Man its 2024! 60% of all Internet traffic coming from mobile devices, nobody gives a damn about how your website looks on desktop anymore.
MOBILE FIRST!
Congratulations on your inclusion with Kevin Geary's Group! Your tutorials are always clear and understandable.
Thank you for another excellent tutorial, and congrats on your endeavor with Mr. Geary!
Such a detailed and simple guide! Thank you.
Very nice. Is there some reason you chose the footer to place your custom CSS?
Since the element styled by the css is not visible on page load, the css should be in the footer to reduced render blocking (waiting for css to load before loading DOM contents)
Thank you for that video. Just update root doesn't work, there should be %root% now. I am new in Bricks, so maybe there was some update for this.
Great video as usual!
The following CSS placed on the Nav Menu also has the effect of keeping the menu clear of the Nav container on mobile (courtesy of Thomas @ Bricks)
root > nav.bricks-mobile-menu-wrapper.right{
position: absolute;
top: 100%;
}
Thanks, have you tested that this works properly? I'm asking because this appears to be a solution for a specific configuration, will not work if the menu is sliding in from the left.
@@DesignwithCracka Hi there , yes you are right i am using Mobile Menu > Position > Right - can confirm, it works with that - think it would just be: root > nav.bricks-mobile-menu-wrapper.left{ ...etc in your use case.
@@DesignwithCracka After a bit more too-and fro with Thomas - this was the eventual solution. It resolved issues with overflow
Should be ok with ...wrapper.left{ too.
root > nav.bricks-mobile-menu-wrapper.right{
position: absolute;
top: 100%;
height: calc(var(--bricks-vh, 1vh)*100 - 100%);
transform: none;
}
My intuition tells me to be weary of Mr. Geary and his "Inner Circle". Be careful, please, my friend! Love your videos bro.
Why in mobile they're always has to be a menu bar toggle?, surely from ux/ui point of view, usability is paramount to get from A/B quickly.
Make the mobile menu fixed to bottom of screen like an app menu.
Man this Bricks is getting Oxy more and more lol. Looks like a copy of oxygen tho.
Did you guys leave oxy now? I know you were an oxy user before :)
Do you have a tutorial on how to create a simple page using Bricks? I can’t find any?
No, but I’ll do that soon.
Great video, a little bit tricky for myself, but very instructive. Glad you joint Kevin Geary, you have the right instructor speech pace, i'll probably join next month and use your affiliate link, cause you deserve it. It will be good, if you could reach the same agreement with Breakdance, to be a seasonal instructor, cause they lack desperately informative in-depth tutorial.
Your videos are a must see. Thanks!
Hi. How do you get the right-click option to display ACSS variables when you're adding the padding? 4:49
It’s an ACSS feature. Turn it on from ACSS settings, I think it’s under options, context menu.
@@DesignwithCracka Thank you! Got it to work. This is very helpful.
What kind of code editor are you using?
Script Organizer
Wow, this tutorial dives deep into customizing the mobile menu using Bricks! It's impressive how detailed and thorough the instructor is in explaining each step, from setting up the header template to tweaking CSS variables for responsiveness. The use of automatic CSS and the rationale behind changing the logo implementation for better mobile usability are particularly insightful. The JavaScript integration to enhance user interaction by ensuring the menu closes smoothly on click adds a professional touch. Overall, this tutorial not only teaches how to implement a practical solution but also emphasizes the importance of user experience in web design. Great job!
Why would anyone want to link their logo to the home page via an external URL? Won't that open it in a new tab? What's wrong with an internal page?
external URL simply means custom URL, at least the way bricks does it, because there's no option to manually add your URL except you choose external URL. No it won't open in new tab unless you specify. Using internal page means that you can't use that relative link to the home page, if you choose a specific page, say you current homepage, if for any reason your home page changes, that link will be broken.
N/B there is nothing like 'eternal URL' in HTML, it's only defined by purpose, not by HTML semantics.
@@DesignwithCracka Oh. I see. 😁👍🏻
Glad you joined the inner circle!!! After all, the "unofficial" circle of great tutors around Bricks / Oxygen is not as big as it seems at first glance...so I'm looking forward to more great videos from you and this new collaboration! Thanks to you and Kevin, my skills have improved enormously :)
What snippet plugin you use in this video?
Script Organizer
GREAT, GREAT tutorial Craka. Could you please confirm if there is a method to display the CTA header button on the mobile menu?
Good video and I love Bricks, however this would be done faster in plain code 😉
Very nice. On thing that I added is "position: fixed;" to the body.no-scroll class to fix the page scrolling in the small area above the mobile menu.
Great Stuff !!! And congrats on the Inner Circle. Look forward to watching you on there.
Great job!!!! I am working on this exact topic.
As usual excellent 👌👌👌
I didn't have enough time to watch it all, but please make another tutorial on how to use the new mobile menu builder and also the desctop. I'm looking to see the best way to make the menu for more complex woo websites where we have product categories alongside the main menu and also mini cart and those stuffs.
I'm waiting for these things for a long time ...
Wow thank you very much. Happy to see you in the Inner Circle :)
Thank you very much for this another awesome tutorial.
Sorry, but a "section" should NEVER be used in header / menu! "Section" is for separating / grouping "content" of a website.
And the issue of an off canvas menu blocking your logo and cta? You simply design your off canvas menu.. WITH the logo (linked to home) and put that at the top of your off canvas menu lol.
Along with your mobile footer with social links, copyright, etc. at the bottom.. simple.
1. No section was used here, because once you change the tag it’s no longer a section. But saying ‘NEVER’ isn’t accurate, because section CAN be used in a header as a valid html5 structure depending on the need to do so. A header can contain a sectioning element.
2. Designing your own off canvas is also an option, but for a simple menu like this, you end up duplicating things which is avoided by this method, and saves time, too.
superb ! so many interesting features !
great tutorial! Happy that you are also in the inner circle and giving more in depth tuts! 😊
That's great
Can you make a tutorial about new mega menu and mobile menu builder?
You have posted a greate demo of mobile menu on Facebook
The one I posted isn’t using the menu builder, it’s part of a premium component I’m working on. But I’ll work on a video for the menu builder.
Well done and thanks for sharing!
Thanks for the great video
Simple is ALWAYS better!
Congratulations on becoming a teacher in the inner circle.
This guy is brilliant teacher!
nice video ✌🏼
This is great, thanks Cracka!
Only issue I noticed - when the mobile menu is open, the page is still scrollable. If you scroll, you'll see the header move away. I'll try to fix it with some JS.
If you're still struggling with this, I found a fix.
@@DontPaws hey! can you please share the fix?
Thank you for another great tutorial!
great video, thank you. Is there a reason why you are starting with a section and changing the tag instead of inserting direct a div or a block?
I guess it's just faster... end result is same as adding a div, then add a container inside the div.
Honestly, hope Bricks sees this and integrates these features. Very smart.
Tbh its mind blowing that they havent.
Please more content with the new CORE Framework :D
CORE & Bricksbuilder
Thank you
great stuff !
Can I use this method with oxygen builder?
Similar technique should work, not exact codes anyway.
Something might be wrong (maybe only on my side?): when pressing (touching) to go back from a page to another, the menu reappears.
Does this happen without the codes active, or only with the codes active?
@@DesignwithCracka didn't use the JS code. Tried but there are some errors, don't know why. Without the JS, so only with CSS, the back action behaves like I wrote above. Might be a conflict on my side though. But if it works well on your end, then I did something wrong or there is a code overlapping somewhere
@@liviustanciu165 yeah maybe a conflict with something on your end
Thank you very much, Is there a particular reason why one wouldn't just put the header div on a higher z-index level in order to cover the slide-in menu?
Because the slide in menu is a descendant of the header, so z-index won't work. The parent cannot be on top of the child element.
@@DesignwithCracka There's the particular reason then :) Thanks Cracka
@@DesignwithCracka Just following up on this: At least with logo-wrapper, Z-Index works fine