Forced Submenu Padding When Adding Submenu Background Color

hi,
Did you try:
ul.wp-block-navigation__submenu-container.has-text-color.has-background.has-custom-color-1-background-color.wp-block-navigation-submenu {padding: 2px;}
?

I tried your code just now, with no success. I placed it in the additional CSS box as-is.

that’s a pity ??

I tried your code just now, with no success. I placed it in the additional CSS box as-is.

Please check your implementation. You didn’t quite add the exact code willem0 gave you above: the line of code on your site begins with .wp-block-navigation before the ul — which shouldn’t be there.

Here’s what you added:

.wp-block-navigationul.wp-block-navigation__submenu-container.has-text-color.has-background.has-custom-color-1-background-color.wp-block-navigation-submenu {padding: 2px;}

But here’s what willem0 gave you:

ul.wp-block-navigation__submenu-container.has-text-color.has-background.has-custom-color-1-background-color.wp-block-navigation-submenu {padding: 2px;}

@gappiah Thank you for responding. I agree that something is wrong with the implementation, but you are incorrect that I added an extra “.wp-block-navigation” in front. Here is a screenshot from my end to back that up. Something else is wrong – it seems that WordPress is adding that part in front by itself.

I don’t know how it got there, but the wrong code is clearly on your site as can be seen in the screenshot below. And all I was saying was that the reason this didn’t want was not that willem0’s code was faulty, but because the code given is not what’s on your site.

@gappiah Let’s clear this up immediately, please. I made no such claim that willem’s code was faulty – only that it didn’t work as instructed for a reason we hadn’t known yet. I also agree that something must be wrong with my site, hence my thread to begin with.

I am grateful you were able to isolate the code in your screenshot, as I was not able to find this on my own (I was looking in the <li> submenu tags). I don’t know what’s causing that or how to get into that code myself. I tried doing so before to no avail (code editor on the nav block, my two templates that seemed to activate the issue, et cetera).

This is the entirety of my header template, which only contains the navigation block nested in a group block. I know that final code is different from design code, but I’m attempting to communicate that this is what I’m able to work with apart from block settings. So, from here, we must determine how that extra text can be removed. If there is no other way, my last resort is to FTP the file and edit it manually.

I found what appears to be a stop-gap solution – please let me know if it’s something I should stick with or revert.

Instead of wracking my brain trying to figure out which WordPress setting caused this submenu padding issue – and only on some of my pages despite them all using the same header – I looked at the format of the code from @willem0 ‘s original suggestion. Rather than try to isolate and remove the extra .wp-block-navigation that my site is somehow generating, I decided to try removing the frontal ul.wp-block-navigation part of the code he gave.

The new clipping starts with the underscore, and I committed the change. It appears to have an immediate and desired effect on my website. Please let me know if this is a safe change, or if it should be reverted.

• This reply was modified 1 year, 6 months ago by Drew.

I decided to revisit the issue again. While I am still investigating why this only takes place on pages with certain templates, I noticed in other CSS that usually there is a space. Since I still don’t know what’s generating the extra .wp-block-navigation, I merely added a space in front of willem’s code and it worked – no need to clip out the “ul” part. It appears the same as when I removed the front part of his code (up to the underscore), but this is probably better since it keeps the class selector.

Edit: I tried something else. I removed the “Submenu & Overlay Background” color that I had set, which of course removes the padding, but I wanted to see if willem’s code would work without it. The excess .wp-block-navigation on line 94 is gone when I remove the submenu bg color, and willem’s code shows up on there by itself now. The background is still empty/transparent, but I think we’re getting closer. The submenu background color assignment is what creates .wp-block-navigationand is also what triggers the submenu padding.

To help with the process of elimination, I finished auditing my templates. I applied the non-problematic one’s block settings to the problematic templates, but the issue persists. I can’t account for why this is only happening with certain templates, but I still suspect something strange is going on. I also double-checked and deactivated any extraneous plugins (with the additional CSS removed). Unfortunately, no luck. Why does this only happen when using certain templates?

Side note: I realized my site-wide font color is already affecting the menu font color, so I removed the custom font color for menu items and submenu items. I adjusted the additional CSS accordingly, removing .has-text-color .

• This reply was modified 1 year, 6 months ago by Drew. Reason: additional troubleshooting performed
• This reply was modified 1 year, 6 months ago by Drew. Reason: additional troubleshooting performed

Sorry, I couldn’t reply earlier: life got in the way ??

I took the screenshot below from the “Project” page on your site before you made the changes mentioned in your last post above.

As you can see from the screenshot, there’s a 2.375em left and right padding on List blocks with a background. It’s this padding that was causing the issue, and what willem0’s code sought to override.

This CSS is only present on the “bad” pages (Project, Guide, etc) and not on the “good” pages (like About) at all.

@gappiah This is great help in locking down the problem area – thank you. I am not sure how to change that, except by FTP-ing one of the files and manually making a correction that way. I’ll check all the files if I have to, so I’ll start doing that later today.

It’s just that I’ve never customized the site design via FTP before, leading me to believe that this padding issue was caused by something I did in the WP editor (and therefore should be able to reverse in said editor). Is there a way to view the has-background property’s default settings in the WP editor?

Still wondering if this is somehow caused by certain templates having bad/conflicting code, but as reported in my previous update I synchronized my templates with no success. My next step in the grand process of elimination is to create a fresh template, replicate the settings in one of the problematic templates, and see if that solves anything.

@gappiah I will omit far too many tests I carried out in the last hour, and get to the reveal. I think I am officially a detective now. The submenu padding issue in the navigation block stems from…..

the List block.

I removed all my page content, adding it back piece by piece. The padding stayed gone, until I re-introduced a list to my page content. This would make sense, because my problematic templates also used a list block. But it left one remaining question… why in the world would a list block from my page content or an unrelated template affect the navigation block in the header template?

Then it hit me. Nav block submenus must share some of the same code as lists. Of course! I tested this by adjusting line height in the global style settings for the list block. Sure enough, not only did my regular list shrink, but the navbar and its submenus also shrunk in height per-item.

I checked both my specific list block instances and the global styling. In all cases, the padding and margin were set to default/empty. I set them to 0, and the page-content list stopped indenting, but the padding in the submenus remained. I’m leaving them on default for now.

I’m hot on the trail.

Edit: I might be somewhat wrong. One of my community members is saying the list block shouldn’t be affecting the navbar submenu, but he agrees the list block seems to be the root cause here.

• This reply was modified 1 year, 6 months ago by Drew.

I’ve essentially resolved the issue, albeit a workaround. If anyone out there ever has a web page with a nav menu and a list, and the nav’s submenu has padding you didn’t ask for (but only if there’s a list present on the same page), then try removing the submenu background color from the WP editor and using custom CSS instead.

I will be using the following CSS code which sets the submenu background color without giving it the has-background class (which the presence of any list block was somehow affecting with default settings, at least for me).

.wp-block-navigation-item {background-color: #d2bd8c;}

Note that this may get overridden if you edit the CSS file directly. I am using the plugin Simple Custom CSS & JS by SilkyPress so that my CSS edits persist between core WordPress updates.

I can confirm this same weird behavior on two client sites. Thank you for making the connection to the list blocks. I’d be building out a site and then suddenly….”Oh no…”…it’s happening again. Padding in my submenus… Has anyone reported this?

It has been reported here: https://core.trac.www.ads-software.com/ticket/58071