sub-menu expanded, but sub-menu items not visible

Hi @fwgparkstein,

Thanks for sharing the site link. I see what you mean! Clicking on the menu “Unsere Politik” doesn’t display the submenu item under it. I’ve taken a look at this from the browser inspector and in the header (with the yellow background) adding extra space or padding at the bottom part will display the submenu item. Go to the site editor and edit the header by increasing the header height, or adding padding below the menu and save.

Hi @kel-dc

thanks for your reply. But adding unnecessary space height to the header, just to show the sub-menu entries is more like waste of screen space instead of a meaningful solution.

I also want to add more than 1 sub-menu entries.

Hello @fwgparkstein!

Can you share screenshots so I can try and replicate the header and menus you’ve created? Go to the site editor in Appearance > Editor. Then click the List View on the upper left ≡, expand the header to see the list of blocks under it (like the Navigation block). Thank you!

Hello @kel-dc

this is the current structure of the page:

I also tried it to have the Navigation in the Header-Section. But same outcome ??

Thanks for the screenshot @fwgparkstein !

I replicated the blocks under Row (Zeile) on my test site but the submenu is visible. In the Group blocks (Gruppe), I created a 2 column block with the image on the left and sidebar on the right and the submenu is still visible.

Can you please expand the Group of blocks (Gruppe) on the list view and share a screenshot of that as well?
Also check if you have CSS codes in Styles > click the 3 dots menu > select Additional CSS and share. Thank you!

Hi @kel-dc

many thanks in advance for your support.

Here’s the page structure with expanded “Gruppe” ??

and this is the custom CSS:

:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}


/* in der Galerie einen orangen teiltransparenten Hintergrund der Bild-Beschriftung*/
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: #F7A800AA;
  font-size: 15px;
  color: var(--contrast);
}

Hello @fwgparkstein!

I see that in navigation, the overflow is set to hidden. This means that the elements that spill outside is not visible. To fix that, you can try a couple of ways:

• Either ungroup the Columns block and check if that will display the submenu.
• Or add this CSS code to change the overflow:

.tw-overflow-hidden, .wp-block-group[style*="radius"] {
    overflow: visible;
}

Hi @kel-dc

ungrouping the columns block didn’t work, but the additional CSS did the job.

However I have no clue why/how you chose the CSS selectors

.tw-overflow-hidden, .wp-block-group[style*="radius"]

Thanks a lot ??

Hello @fwgparkstein

?but the additional CSS did the job.

YAYYY!!! ??

However I have no clue why/how you chose the CSS selectors

I used the browser inspector to check what’s happening with the navigation block and stumbled upon the hidden overflow which caused the submenu to be hidden beneath an image, or whatever content was on the page.

I checked your site again and the submenu now opens. Well done! ??

If there’s nothing else, we can mark this thread solved. If you need further help you can check our the Twenty Twenty-four documentation or open a new thread.