Hi there! I’m fairly new to Bricks Builder… So please be patient with me if I’m missing something obvious. CSS and website design is quite comfortable for me, but learning “the Bricks” way is a process.
I have a menu, which I’ve setup with Nav (Nestable), that contains a few menu items that I ONLY want to show on the mobile menu. So, for these special case items, I’ve set the display: none property on Desktop and Tablet, then on Mobile Landscape (where I want the item to start showing) I set it to display: flex.
This method DOES hide the menu item until the appropriate break point. Yay! However, it hides the child element anchor link but not the parent list element. Thus, the list item still exists and applies the standard gap where the menu item would’ve been. The list item element should’ve been the element that got hidden.
How do I go about eliminating this unwanted gap? How do I tell the parent element to also hide until the appropriate breakpoint? Do I need to add custom CSS for this or is there a better way?
Here’s how it looks right now on desktop:
Please don’t hesitate to ask clarification questions if I’m being unclear. Thank you in advance for your time!
The gap between “About Us” and the “Financing” button shouldn’t be that big. It’s applying the row gap two extra times because certain list items are not hidden (even though all their child elements are hidden properly).
Yup, only the <a> tag for the link is actually hidden and not it’s li wrapper.
@thomas to me this is a bug and the reason why i never use the nav element to create navs
@devEdge afaik the only alternative here is to create a duplicate of the navigation, and toggle the visibility of those instead of working on the nav items…
Alright, that’s a very helpful response. I’m glad I wasn’t missing anything too obvious.
So, based on this and our current state of Bricks, my thought is to setup some custom CSS (instead of duplicating the full menu which sounds awful, tbh) use the :has() pseudo-class. You’d have to assign a specific CSS class to the menu item you want to hide, like show-ls-mobile or whatever.
