What I See Is Not What I Get

I’m not sure where this is set in the block editor, and I obviously cannot check your local installation to compare the two… but on the public site, I see the following padding on ordered list (ol) and unordered list (ul) elements… and that’s what’s affecting the top navigation menu.

ol.has-background, ul.has-background {
    padding: 1.25em 2.375em;
}

Note that this is not only affecting your top primary menu, but it’s also affecting all the inline navigation menus at the top of your individual blog posts.

The left (vertical) navigation menu is not affected because you’ve added the following inline style attribute to override the default padding on the ul element:

style="margin-top:0px;margin-bottom:0;padding-top:0;padding-left:25px"

Perhaps you could do the same for the top navigation menus?

Better yet, since this affects all lists with a background color (including the inline menus on some of your posts), I’ll recommend you remove the padding from the ol and ul elements, and only add them to specific blocks where they’re needed.

Good luck!

Thank you. This is surely the problem, but I cannot figure out how to reset the padding values for the elements. I think maybe at some point I discovered how to set global padding values for blocks or other kinds of elements, but I can’t remember what I did or find a way to do that. Do I need to edit code to fix this?

Why doesn’t the editor show me what I am going to get? When I look at the settings for the column and the navigation block, it appears to me that the padding is set to zero top and bottom and the editor seems to show it that way, but somewhere this gets overridden by something before the actual page is displayed.

Here’s the full CSS style declaration for the padding I mentioned above:

<style id='wp-block-list-inline-css'>
ol,ul{box-sizing:border-box}ol.has-background,ul.has-background{padding:1.25em 2.375em}
</style>

So this padding seems to be coming from a setting on the list block, where you have a background color applied. Without access to your site’s dashboard (which won’t happen!) I’ve no way of telling you where to go to check for what.

The easiest solution then would be to use custom CSS to override this. Try the custom CSS below:

ul.wp-block-navigation.has-background {
    padding-top: 0px;
    padding-bottom: 0px;
}

You may increase the value of 0px if you want to leave a little padding.

Accessing the place where you can add custom CSS is a bit tricky with Site Editor. While editing any template in APPEARANCE => EDITOR, click the Styles button (half moon), then the “More” button (3 vertical dots), then “Additional CSS”.

Thanks. Adding the code as you suggested did not fix it, but adding the same CSS code in the Additional CSS section of the Customize panel on the left sidebar under Appearance did.

I’m glad you got it sorted.

I didn’t mention the traditional ADDITIONAL CSS panel in CUSTOMIZER because this is disabled by default when using a block/FSE theme like Twenty Twenty-Three. But it seems something (plugin? custom PHP code?) has enabled it for you.

If you consider the problem fully addressed and you can spare a second, kindly mark this post as RESOLVED.

Thank you, and good luck with your project!

I thought I had marked it as resolved. The only thing I don’t get is why the block editor cannot override theme defaults, but there are greater mysteries in life to ponder.

Thanks.