WAIT: Dropdown - static - hides menu content

Bugs
1

EDIT: I solved it, by changing the Offcanvas > Content element to display:grid; and set to one column grid.

Hello, I am looking for help with dropdown menu items in mobile view. Not sure why, but when I open the dropdown, menu dissapears. Can anyone point me to the right direction please?

GRANITOL

Before opening dropdown:

image
image554×1011 48.7 KB

After:

image
image526×932 66.6 KB

Structure:
image

Dropdown settings:
image

When I go to edit the child template, I see some items from the offcanvas and header is being displayed strangely: Homepage template:

image
image2551×1352 203 KB

Header template:

image
image2229×273 130 KB

There is something wrong propably at 768px breakpoint:

GRANITOL a 6 dalších stránek – Pracovní – Microsoft​ Edge
Watch Video

2

I did solved the main problem, but the problem with menu items, but in child templates, still appear the wrongly displayed header template.

3

Hi Aleš,
I’m glad you were already able to solve the initial issue.

Can you explain in more detail what this is about?

4

Hello Timmse,

it seems like some elements are generated wrongly in HTML. Look, this is a header template, when I am editing it:

image
image2551×334 48.2 KB

As you can see, everything is good so far, nothing overflow the container, everything works fine.

That is the same, as frontend, everything is also fine in the frontend.

image
image2106×662 40.7 KB

However, this is what happen, when I open some page in Bricks, to edit it. Something from menu is coming out of it.

image
image2219×374 49.9 KB

And it is a offcanvas content propably.

EDIT: It is propably the content of Nav (nestable) from OffCanvas. The HTML structure is not being displayed right in child templates.

Could you try it? Here is the json of section:

{"content":[{"id":"zwbuye","name":"section","parent":0,"children":["xowsvs"],"settings":{"_cssGlobalClasses":["cotl1t","acss_import_content-grid"]},"label":"Site_header"},{"id":"xowsvs","name":"container","parent":"zwbuye","children":["ypaypy","lixdih","tbwflq","cucqof"],"settings":{"_cssGlobalClasses":["wl4p67","acss_import_content--feature"]},"label":"Inner"},{"id":"ypaypy","name":"svg","parent":"xowsvs","children":[],"settings":{"_cssGlobalClasses":["dst45d"],"file":{"id":15,"filename":"granitol_logo_vector_white.svg","url":"https://granitol.alessykora.cz/wp-content/uploads/2024/12/granitol_logo_vector_white.svg"},"link":{"type":"external","url":"/"}},"label":"Logo"},{"id":"lixdih","name":"nav-nested","parent":"xowsvs","children":["llcmfp"],"settings":{"_cssGlobalClasses":["qrbdol"],"mobileMenu":"never"},"label":"Nav","themeStyles":[]},{"id":"llcmfp","name":"block","parent":"lixdih","children":["tcqmyh","reybrz","lyhnmn","qctous","hivvdt","jongfs"],"settings":{"tag":"ul","_hidden":{"_cssClasses":"brx-nav-nested-items"},"_cssGlobalClasses":["0rh27f"]},"label":"Nav Items","cloneable":false,"deletable":false},{"id":"tcqmyh","name":"text-link","parent":"llcmfp","children":[],"settings":{"text":"Produkty","link":{"type":"external","url":"/produkty/"},"_cssGlobalClasses":["rqy1ug"]},"label":"Nav Link"},{"id":"reybrz","name":"dropdown","parent":"llcmfp","children":["lkntyn"],"settings":{"text":"Obory","_cssGlobalClasses":["u3zjyt"],"megaMenu":true,"megaMenuSelector":".site_header__inner"},"label":"Nav Dropdown","themeStyles":[]},{"id":"lkntyn","name":"div","parent":"reybrz","children":["xkeket"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul","_cssGlobalClasses":["jy066b","xwh68f"]},"label":"Nav Dropdown Content","cloneable":false,"deletable":false},{"id":"xkeket","name":"nav-menu","parent":"lkntyn","children":[],"settings":{"_cssGlobalClasses":[],"menu":"13"},"label":"Nav Dropdown Links","insideDropdown":true,"themeStyles":[]},{"id":"lyhnmn","name":"dropdown","parent":"llcmfp","children":["frncxe"],"settings":{"text":"O nás","_cssGlobalClasses":["u3zjyt","ovbqqi"],"megaMenu":true,"megaMenuSelector":".site_header__inner"},"label":"Nav Dropdown","themeStyles":[]},{"id":"frncxe","name":"div","parent":"lyhnmn","children":["wynbzh"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul","_cssGlobalClasses":["jy066b","xwh68f"]},"label":"Nav Dropdown Content","cloneable":false,"deletable":false},{"id":"wynbzh","name":"nav-menu","parent":"frncxe","children":[],"settings":{"_cssGlobalClasses":[],"menu":"15"},"label":"Nav Dropdown Links","insideDropdown":true,"themeStyles":[]},{"id":"qctous","name":"dropdown","parent":"llcmfp","children":["kpicdw"],"settings":{"text":"Kariéra","_cssGlobalClasses":["u3zjyt","ovbqqi"],"megaMenu":true,"megaMenuSelector":".site_header__inner"},"label":"Nav Dropdown","themeStyles":[]},{"id":"kpicdw","name":"div","parent":"qctous","children":["cflznz"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul","_cssGlobalClasses":["jy066b"]},"label":"Nav Dropdown Content","cloneable":false,"deletable":false},{"id":"cflznz","name":"nav-menu","parent":"kpicdw","children":[],"settings":{"_cssGlobalClasses":[],"menu":"16"},"label":"Nav Dropdown Links","insideDropdown":true,"themeStyles":[]},{"id":"hivvdt","name":"text-link","parent":"llcmfp","children":[],"settings":{"text":"Maloobchod","link":{"type":"external","url":"/maloobchod/"},"_cssGlobalClasses":["rqy1ug","aar44f"]},"label":"Nav Link"},{"id":"jongfs","name":"dropdown","parent":"llcmfp","children":["sxtmwx"],"settings":{"text":"Kontakt","_cssGlobalClasses":["u3zjyt","ovbqqi"],"megaMenu":true,"megaMenuSelector":".site_header__inner"},"label":"Nav Dropdown","themeStyles":[]},{"id":"sxtmwx","name":"div","parent":"jongfs","children":["mbrepp"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul","_cssGlobalClasses":["jy066b","xwh68f"]},"label":"Nav Dropdown Content","cloneable":false,"deletable":false},{"id":"mbrepp","name":"nav-menu","parent":"sxtmwx","children":[],"settings":{"_cssGlobalClasses":[],"menu":"14"},"label":"Nav Dropdown Links","insideDropdown":true,"themeStyles":[]},{"id":"tbwflq","name":"offcanvas","parent":"xowsvs","children":["nmnbcq"],"settings":{"_cssGlobalClasses":["041v69"],"noScrollBody":true,"ariaLabel":"Mobilní navigace","direction":"top"},"label":"Mobile Nav","themeStyles":[]},{"id":"nmnbcq","name":"block","parent":"tbwflq","children":["gukrxb","byppsu"],"settings":{"_hidden":{"_cssClasses":"brx-offcanvas-inner"},"_cssGlobalClasses":["j17quf"]},"label":"Content","cloneable":false,"deletable":false},{"id":"gukrxb","name":"block","parent":"nmnbcq","children":["fdbevf","rpdsmw"],"settings":{"_cssGlobalClasses":["bkkgik"]},"label":"header"},{"id":"fdbevf","name":"svg","parent":"gukrxb","children":[],"settings":{"_cssGlobalClasses":["dst45d","v1bafi"],"file":{"id":15,"filename":"granitol_logo_vector_white.svg","url":"https://granitol.alessykora.cz/wp-content/uploads/2024/12/granitol_logo_vector_white.svg"},"link":{"type":"external","url":"/"}},"label":"Logo"},{"id":"rpdsmw","name":"toggle","parent":"gukrxb","children":[],"settings":{"_cssGlobalClasses":["tslns1"],"icon":{"library":"themify","icon":"ti-close"},"ariaLabel":"Zavřít menu","toggleSelector":".mobile-nav"},"label":"mobile-nav-close"},{"id":"byppsu","name":"nav-nested","parent":"nmnbcq","children":["qhdvuw"],"settings":{"_cssGlobalClasses":["y5jo5g"],"mobileMenu":"never"},"label":"nav","themeStyles":[]},{"id":"qhdvuw","name":"block","parent":"byppsu","children":["mmjicl","eptplz","gghsnv","oahaga","aknhtc","bpfsbw"],"settings":{"tag":"ul","_hidden":{"_cssClasses":"brx-nav-nested-items"},"_cssGlobalClasses":["6jvy8w"],"_direction":"column"},"label":"nav items","cloneable":false,"deletable":false},{"id":"mmjicl","name":"text-link","parent":"qhdvuw","children":[],"settings":{"text":"Produkty","link":{"type":"external","url":"/produkty/"},"_cssGlobalClasses":["pi5zrg"]},"label":"nav link"},{"id":"eptplz","name":"dropdown","parent":"qhdvuw","children":["tpydrg"],"settings":{"text":"Obory","_cssGlobalClasses":["9azcnv"],"static":true},"label":"nav dropdown","themeStyles":[]},{"id":"tpydrg","name":"div","parent":"eptplz","children":["qchugi"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul","_cssGlobalClasses":[]},"label":"Content","cloneable":false,"deletable":false},{"id":"qchugi","name":"nav-menu","parent":"tpydrg","children":[],"settings":{"_cssGlobalClasses":["l5n2ki"],"menu":"13","mobileMenu":"never"},"label":"menu","insideDropdown":true,"themeStyles":[]},{"id":"gghsnv","name":"dropdown","parent":"qhdvuw","children":["egsmjw"],"settings":{"text":"O nás","_cssGlobalClasses":["9azcnv"],"static":true},"label":"nav dropdown","themeStyles":[]},{"id":"egsmjw","name":"div","parent":"gghsnv","children":["gjxdyb"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul"},"label":"Content","cloneable":false,"deletable":false},{"id":"gjxdyb","name":"nav-menu","parent":"egsmjw","children":[],"settings":{"_cssGlobalClasses":["l5n2ki"],"menu":"15","mobileMenu":"never"},"label":"menu","insideDropdown":true,"themeStyles":[]},{"id":"oahaga","name":"dropdown","parent":"qhdvuw","children":["jmzclg"],"settings":{"text":"Kariéra","_cssGlobalClasses":["9azcnv"],"static":true},"label":"nav dropdown","themeStyles":[]},{"id":"jmzclg","name":"div","parent":"oahaga","children":["ycubry"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul"},"label":"Content","cloneable":false,"deletable":false},{"id":"ycubry","name":"nav-menu","parent":"jmzclg","children":[],"settings":{"_cssGlobalClasses":["l5n2ki"],"menu":"16","mobileMenu":"never"},"label":"menu","insideDropdown":true,"themeStyles":[]},{"id":"aknhtc","name":"text-link","parent":"qhdvuw","children":[],"settings":{"text":"Maloobchod","link":{"type":"external","url":"/maloobchod/"},"_cssGlobalClasses":["pi5zrg"]},"label":"nav link"},{"id":"bpfsbw","name":"dropdown","parent":"qhdvuw","children":["jmlaam"],"settings":{"text":"Kontakt","_cssGlobalClasses":["9azcnv"],"static":true},"label":"nav dropdown","themeStyles":[]},{"id":"jmlaam","name":"div","parent":"bpfsbw","children":["beqjet"],"settings":{"_hidden":{"_cssClasses":"brx-dropdown-content"},"tag":"ul"},"label":"Content","cloneable":false,"deletable":false},{"id":"beqjet","name":"nav-menu","parent":"jmlaam","children":[],"settings":{"_cssGlobalClasses":["l5n2ki"],"menu":"14","mobileMenu":"never"},"label":"menu","insideDropdown":true,"themeStyles":[]},{"id":"cucqof","name":"toggle","parent":"xowsvs","children":[],"settings":{"_cssGlobalClasses":["eky1w4"],"ariaLabel":"Otevřít menu","toggleSelector":".mobile-nav"},"label":"mobile-nav-open"}],"source":"bricksCopiedElements","sourceUrl":"https://granitol.alessykora.cz","version":"1.11.1.1","globalClasses":[{"id":"cotl1t","name":"site_header","settings":{"_height":"130","_padding":{"top":"0","bottom":"0"},"_cssCustom":".site_header.site_header--primary {\n  background: var(--primary);\n}\n\n.site_header.site_header--primary .site_header__logo .logo_special {\n  fill: var(--secondary);\n}","_height:xxl":"120","_height:xl":"100","_height:tablet_portrait":"80","_height:xs":"60"},"modified":1735850934,"user_id":1},{"id":"acss_import_content-grid","name":"content-grid","settings":[],"category":"acss"},{"id":"wl4p67","name":"site_header__inner","settings":{"_flexWrap":"nowrap","_direction":"row","_height":"100%","_alignItems":"stretch","_justifyContent:xl":"space-between"}},{"id":"acss_import_content--feature","name":"content--feature","settings":[],"category":"acss"},{"id":"dst45d","name":"site_header__logo","settings":{"_width":"100%","_widthMax":"20rem","_height":"100%"}},{"id":"qrbdol","name":"site_header__nav","settings":{"itemTypography":{"color":{"raw":"var(--text-light)"},"font-size":"20px","font-family":"Arial","text-transform":"uppercase","font-weight":"700","line-height":"1"},"dropdownBackgroundColor":{"raw":"var(--primary)"},"dropdownItemTypography":{"color":{"raw":"var(--text-light)"}},"mobileMenuBackgroundColor:xl":{"raw":"var(--primary)"},"mobileMenuWidth:xl":"100%","mobileMenuAlignItems:xl":"flex-start","dropdownBackgroundColor:xl":{"id":"acss_import_white","name":"white","raw":"var(--white)"},"dropdownItemTypography:xl":{"color":{"raw":"var(--primary)"},"font-size":"20"},"dropdownTypography:xl":{"color":{"raw":"var(--primary)"},"font-size":"20"},"_display:xl":"none","iconGap":"var(--space-xs)","iconPosition":"right","iconSize":"inherit","dropdownContentWidth":"100%","dropdownItemTransition":"50","dropdownTypography":{"font-size":"24","text-transform":"uppercase","font-family":"Arial","font-weight":"700"},"itemTypography:hover":{"color":{"raw":"var(--secondary)"}},"gap":"0","itemPadding":{"left":"var(--space-xs)","right":"var(--space-xs)"},"iconPadding":{"left":"0","right":"var(--space-xs)"}},"modified":1735817302,"user_id":1},{"id":"0rh27f","name":"site_header__nav-items","settings":{"_direction":"row","_display":"flex","_flexWrap":"nowrap","_height":"100%","_cssCustom":".site_header__nav-items li, .site_header__nav-items li .brx-submenu-toggle {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n}\n","_cssCustom:xl":".site_header__nav-items li, .site_header__nav-items li .brx-submenu-toggle {\n  height: 52px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n","_padding:xl":{"left":"var(--gutter)","right":"var(--gutter)"}}},{"id":"rqy1ug","name":"site_header__nav-link","settings":[]},{"id":"u3zjyt","name":"site_header__nav-dropdown","settings":{"_interactions":[{"id":"gpijxv","trigger":"mouseenter","action":"setAttribute","actionAttributeKey":"class","actionAttributeValue":"site_header--primary","target":"custom","targetSelector":".site_header"},{"id":"nuqsit","trigger":"mouseleave","action":"removeAttribute","actionAttributeKey":"class","actionAttributeValue":"site_header--primary","target":"custom","targetSelector":".site_header"},{"id":"ylstur","trigger":"focus","action":"setAttribute","actionAttributeKey":"class","actionAttributeValue":"site_header--primary","target":"custom","targetSelector":".site_header"},{"id":"uqoacn","trigger":"blur","action":"removeAttribute","actionAttributeKey":"class","actionAttributeValue":"site_header--primary","target":"custom","targetSelector":".site_header"}],"contentItemTypography:xl":{"font-size":"20","color":{"raw":"var(--primary)"}},"contentItemTypography:hover":{"color":{"raw":"var(--secondary)"}}}},{"id":"jy066b","name":"site_header__nav-dropdown-content","settings":{"_padding":{"bottom":"100","top":"30","left":"var(--gutter)","right":"var(--gutter)"},"_gridTemplateColumns:xl":"full","_direction":"column","_alignItems":"flex-start","_cssCustom":".site_header__nav-dropdown-content li {\n  width: 100%;\n  justify-content: left;\n}\n.site_header__nav-dropdown-content li a {\n  width: 100%;\n  justify-content: left;\n}"},"modified":1735640438,"user_id":1},{"id":"041v69","name":"mobile-nav","settings":{"width":"100%","height":"100svh","height:xl":"100dvh"},"modified":1735893972,"user_id":1},{"id":"j17quf","name":"mobile-nav__content","settings":{"_background":{"color":{"raw":"var(--primary)"}},"_cssCustom":".mobile-nav__content .logo_special {\n  fill: var(--secondary);\n}","_display:xl":"grid","_gridTemplateColumns:xl":"var(--grid-1)","_alignContentGrid:xl":"flex-start"}},{"id":"bkkgik","name":"mobile-nav__header","settings":{"_direction":"row","_flexWrap":"nowrap","_width":"100%","_padding":{"left":"var(--gutter)","right":"var(--gutter)","bottom":"var(--space-m)","top":"var(--space-m)"},"_justifyContent":"space-between"},"modified":1735834797,"user_id":1},{"id":"v1bafi","name":"mobile-nav__logo","settings":{"_height":"auto"}},{"id":"tslns1","name":"site_header__nav-close","settings":{"iconSize":"27px","iconColor":{"raw":"var(--text-light)"},"iconColor:hover":{"raw":"var(--secondary)"}},"modified":1735820867,"user_id":1},{"id":"y5jo5g","name":"mobile-nav__nav","settings":{"itemTypography":{"font-size":"20","color":{"raw":"var(--text-light)"},"font-family":"Arial","text-transform":"uppercase","font-weight":"700"},"itemTypography:hover":{"color":{"raw":"var(--secondary)"}},"dropdownBackgroundColor":{"raw":"var(--white)"},"itemPadding":{"left":"var(--gutter)","right":"var(--gutter)","top":"var(--space-s)","bottom":"var(--space-s)"},"gap":"0","iconPosition":"right","iconSize":"inherit","_width":"100%","dropdownPadding":{"left":"var(--gutter)","right":"var(--gutter)","bottom":"var(--space-s)","top":"var(--space-s)"},"dropdownItemBorder":{"style":"none","width":{"top":"0","right":"0","bottom":"0","left":"0"}},"dropdownItemTypography":{"font-size":"24","text-transform":"uppercase","font-family":"Arial","font-weight":"700","color":{"raw":"var(--primary)"}},"dropdownItemTypography:hover":{"color":{"raw":"var(--secondary)"}},"iconPadding":{"right":"var(--gutter)","left":"0","top":"0","bottom":"0"},"iconGap":"0","itemTypographyActive":{"color":{"raw":"var(--secondary)"}},"dropdownTypography":{"font-size":"24","color":{"raw":"var(--text-light)"},"font-family":"Arial","text-transform":"uppercase","font-weight":"700"},"_cssCustom":".mobile-nav__nav li {\n  width: 100%;\n}\n.mobile-nav__nav li a {\n  width: 100%;\n}\n.mobile-nav__nav .brx-submenu-toggle button {\n  margin-left: auto;\n}","dropdownTypography:tablet_portrait":{"font-size":"20"}},"modified":1735841250,"user_id":1},{"id":"6jvy8w","name":"mobile-nav__nav-items","settings":{"_width":"100%","_alignItems":"flex-start","_flexWrap":"wrap","_position":"relative"},"modified":1735831707,"user_id":1},{"id":"pi5zrg","name":"mobile-nav__nav-link","settings":[]},{"id":"9azcnv","name":"mobile-nav__nav-dropdown","settings":{"_width":"100%","contentWidth":"100%"}},{"id":"l5n2ki","name":"mobile-nav__menu","settings":[]},{"id":"eky1w4","name":"site_header__nav-open","settings":{"iconColor":{"raw":"var(--text-light)"},"iconSize":"27px","_flexDirection":"column","_alignSelf":"center","_display":"none","_display:xl":"flex","iconColor:hover":{"raw":"var(--secondary)"}}}],"globalElements":[]}
5

I can’t see the issue on our dev installation using your template. Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.