Browser: Chrome
OS: Windows 11
URL: https://sundancecollege.com/
Video: Jam
With the nav nestable, if you have a large dropdown (one that scrolls) with a div inside that is set to display: grid, the mobile menu will have excess scroll even when the dropdown is closed.
Hi @mtehsunmeta,
I would like to reproduce your exact scenario. Would you mind copy-pasting your structure here? Make sure to wrap it in a code block.
Thanks,
Matej
Hi @Matej ,
Thanks for the reply.
<section id="brxe-peqgdj" class="brxe-section">
<div id="brxe-vjnaso" class="brxe-container">
<nav id="brxe-kurcoz" data-script-id="kurcoz" class="brxe-nav-nested" aria-label="Menu"
data-toggle="mobile_landscape">
<ul id="brxe-rbasgo" class="brxe-block brx-nav-nested-items">
<li class="menu-item" style="display: none;"><button id="brxe-ijhiov" data-script-id="ijhiov"
class="brxe-toggle brx-toggle-div" aria-label="Open" aria-expanded="false"><i
class="ion-md-close"></i></button></li>
<li id="brxe-plfotn" data-script-id="plfotn" class="brxe-dropdown"
style="--brx-dropdown-height-before: 0px;">
<div class="brx-submenu-toggle"><span>Dropdown</span><button aria-expanded="false"
aria-label="Toggle dropdown"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"
fill="none">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5" stroke="currentcolor"></path>
</svg></button></div>
<ul id="brxe-xtvodm" class="brxe-div brx-dropdown-content">
<li class="menu-item">
<div id="brxe-walmuk" class="brxe-block">
<h2 id="brxe-xqagve" class="brxe-heading">I am a heading</h2>
<ul id="brxe-eqeqsa" class="brxe-list">
<li>
<div class="content"><span class="title">List item #1</span><span
class="separator"></span><span class="meta">$10.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<div id="brxe-zfcdgo" class="brxe-block">
<h2 id="brxe-lkfazy" class="brxe-heading">I am a heading</h2>
<ul id="brxe-cervzf" class="brxe-list">
<li>
<div class="content"><span class="title">List item #1</span><span
class="separator"></span><span class="meta">$10.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<div id="brxe-rjtdij" class="brxe-block">
<h2 id="brxe-yrnzzs" class="brxe-heading">I am a heading</h2>
<ul id="brxe-uiugzr" class="brxe-list">
<li>
<div class="content"><span class="title">List item #1</span><span
class="separator"></span><span class="meta">$10.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
<li>
<div class="content"><span class="title">List item #2</span><span
class="separator"></span><span class="meta">$25.00</span></div>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul><button id="brxe-xepyxd" data-script-id="xepyxd" class="brxe-toggle" aria-label="Open"
aria-expanded="false"><span class="brxa-wrap"><span class="brxa-inner"></span></span></button>
</nav>
</div>
</section>
id=“brxe-xtvodm” has the display: grid;.
Hi, thanks for this, but I will need the JSON file that I can import in my builder.
Right-click on the element (or section), whatever you want to copy, in the right structure menu, then “paste” it here.
–
Matej
Sorry!
{"content":[{"id":"peqgdj","name":"section","parent":0,"children":["vjnaso"],"settings":{}},{"id":"vjnaso","name":"container","parent":"peqgdj","children":["kurcoz"],"settings":{}},{"id":"kurcoz","name":"nav-nested","parent":"vjnaso","children":["rbasgo","xepyxd"],"settings":{}},{"id":"rbasgo","name":"block","parent":"kurcoz","children":["ijhiov","plfotn"],"settings":{"tag":"ul","_hidden":{"_cssClasses":"brx-nav-nested-items"},"_justifyContent:mobile_portrait":"flex-start","_typography":{"font-size":"1.4rem"},"_padding:tablet_portrait":{"bottom":"2rem","left":"2rem","right":"2rem","top":"2rem"},"_display":"flex","_direction":"row","_direction:tablet_portrait":"column","_flexWrap":"nowrap","_cssCustom":"#brxe-rbasgo .brxe-text-link,\n.brxe-dropdown {\ntext-wrap: nowrap\n}\n\n#brxe-rbasgo p {\ntext-wrap: wrap;\n}","_justifyContent:tablet_portrait":"flex-start","_widthMax:tablet_portrait":"100%"},"label":"Nav items","cloneable":false,"deletable":false},{"id":"ijhiov","name":"toggle","parent":"rbasgo","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-md-close"},"_margin:tablet_portrait":{"left":"auto"},"_hidden":{"_cssClasses":"brx-toggle-div"},"iconSize:tablet_portrait":"40","iconSize:mobile_portrait":"20","_typography:mobile_portrait":{"color":{"hex":"#262626"}},"iconColor:mobile_portrait":{"hex":"#262626"}},"label":"Toggle (Close: Mobile)","themeStyles":[]},{"id":"plfotn","name":"dropdown","parent":"rbasgo","children":["xtvodm"],"settings":{"text":"Dropdown"}},{"id":"xtvodm","name":"div","parent":"plfotn","children":["walmuk","zfcdgo","rjtdij"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul","_display:mobile_portrait":"grid","_gridTemplateColumns:mobile_portrait":"1fr"},"label":"Content","cloneable":false,"deletable":false},{"id":"walmuk","name":"block","parent":"xtvodm","children":["xqagve","eqeqsa"],"settings":{"_rowGap:mobile_portrait":"var(--space-s)"}},{"id":"xqagve","name":"heading","parent":"walmuk","children":[],"settings":{"text":"I am a heading"}},{"id":"eqeqsa","name":"list","parent":"walmuk","children":[],"settings":{"items":[{"title":"List item #1","meta":"$10.00","id":"ryzjtz"},{"title":"List item #2","meta":"$25.00","id":"rprmpz"},{"title":"List item #2","meta":"$25.00","id":"iqumhu"},{"title":"List item #2","meta":"$25.00","id":"yrdwqt"},{"title":"List item #2","meta":"$25.00","id":"uvxhal"},{"title":"List item #2","meta":"$25.00","id":"qokopf"},{"title":"List item #2","meta":"$25.00","id":"ofzaxa"},{"title":"List item #2","meta":"$25.00","id":"mgyvxq"},{"title":"List item #2","meta":"$25.00","id":"ywhggb"},{"title":"List item #2","meta":"$25.00","id":"eytvgi"},{"title":"List item #2","meta":"$25.00","id":"gkquwg"},{"title":"List item #2","meta":"$25.00","id":"vtzkfx"}]}},{"id":"zfcdgo","name":"block","parent":"xtvodm","children":["lkfazy","cervzf"],"settings":{}},{"id":"lkfazy","name":"heading","parent":"zfcdgo","children":[],"settings":{"text":"I am a heading"}},{"id":"cervzf","name":"list","parent":"zfcdgo","children":[],"settings":{"items":[{"title":"List item #1","meta":"$10.00","id":"ryzjtz"},{"title":"List item #2","meta":"$25.00","id":"rprmpz"},{"title":"List item #2","meta":"$25.00","id":"iqumhu"},{"title":"List item #2","meta":"$25.00","id":"yrdwqt"},{"title":"List item #2","meta":"$25.00","id":"uvxhal"},{"title":"List item #2","meta":"$25.00","id":"qokopf"},{"title":"List item #2","meta":"$25.00","id":"ofzaxa"},{"title":"List item #2","meta":"$25.00","id":"mgyvxq"},{"title":"List item #2","meta":"$25.00","id":"ywhggb"},{"title":"List item #2","meta":"$25.00","id":"eytvgi"},{"title":"List item #2","meta":"$25.00","id":"gkquwg"},{"title":"List item #2","meta":"$25.00","id":"vtzkfx"}]}},{"id":"rjtdij","name":"block","parent":"xtvodm","children":["yrnzzs","uiugzr"],"settings":{}},{"id":"yrnzzs","name":"heading","parent":"rjtdij","children":[],"settings":{"text":"I am a heading"}},{"id":"uiugzr","name":"list","parent":"rjtdij","children":[],"settings":{"items":[{"title":"List item #1","meta":"$10.00","id":"ryzjtz"},{"title":"List item #2","meta":"$25.00","id":"rprmpz"},{"title":"List item #2","meta":"$25.00","id":"iqumhu"},{"title":"List item #2","meta":"$25.00","id":"yrdwqt"},{"title":"List item #2","meta":"$25.00","id":"uvxhal"},{"title":"List item #2","meta":"$25.00","id":"qokopf"},{"title":"List item #2","meta":"$25.00","id":"ofzaxa"},{"title":"List item #2","meta":"$25.00","id":"mgyvxq"},{"title":"List item #2","meta":"$25.00","id":"ywhggb"},{"title":"List item #2","meta":"$25.00","id":"eytvgi"},{"title":"List item #2","meta":"$25.00","id":"gkquwg"},{"title":"List item #2","meta":"$25.00","id":"vtzkfx"}]}},{"id":"xepyxd","name":"toggle","parent":"kurcoz","children":[],"settings":{},"label":"Toggle (Open: Mobile)"}],"source":"bricksCopiedElements","sourceUrl":"https://dev.sundancecollege.com","version":"1.11.1.1","globalClasses":[],"globalElements":[]}
Hi @mtehsunmeta,
thank you for this. I can replicate this locally, and yes, that “grid” is a problem, since it overrides the display:none that we set, when menu is closed.
You can try to set something like this so that the “grid” applies only when the dropdown is opened.
.brxe-dropdown.open.active > %root%{
display:grid;
}
Matej
Thanks, Matej. Looks like that’s correct. Another solution is not to touch the content div’s display setting and instead add a block inside the content div and set that to grid. I need it as a grid on desktop.
Thanks again!
Yeah, that would be the second solution, also good one 
I’ll mark this topic as no bug now, as it’s not really a bug - just a misconfiguration.
Matej