Word Wrap on Drop Down Menus

Hey @fotmich

I noticed the the dropdown menus in question (on the Impact Overview page) have padding around it. Please see my screenrecording: https://cloudup.com/cmWExE4NKV1

I assume the Impact Overview page is sharing the same template as the other pages below ‘About Us’? That is why it is so odd that it appears differntly.

Have you tried assigning a different template to the Impact Overview page, refresh and re-assigning the correct template?

Have you added any new plugins before adding the Impact Overview page?

Thanks for looking at this. I watched your video and it’s strange, because the pages are using the exact same template. I have added several commerce plugins between building the initial site and building the Impact page, but none that I think would have affected general formatting. I did try to change to a different template and back, but still no joy…

Hey @fotmich

The styles I can see affecting the menu on that page are added inline to the page. It is possibly the function of Gutenberg that only includes styles for elements when they are needed.

So in this case – the page content contains a bulleted list, so I?think?it’s including the additonal style that adds the padding to list items in the menu?because?there’s a list in the content.

You could try to either remove the list from that page as a test or not dispplaying the content with the List block. Or try adding a list to another page to see if the same issue occurs.

it looks like this is a known bug with the editor at the moment – something that should be getting worked on.

https://github.com/WordPress/gutenberg/issues/50486

In the meantime – you can add the code below to your site’s CSS following these instructions.

/* unset padding on the navigation block */ 
.wp-block-navigation ul {
    padding: unset;
}

Thank you very much @jordesign

That did the trick! Thanks everyone!!!