Nav menu items styling not as expected

[bobbingwide]

When I started styling the nav menu I copied the CSS from genesis-a2z. The screenshot.png I took on 28th October showed the white space. When I updated to Gutenberg 9.2.2 I noticed the space between menu items disappeared. This is because there is no longer a blank space between list items. This can easily be demonstrated using the the code inspector. In this screen capture, from the genesis-a2z theme, I removed the blank space between a couple of items.

Requirement

Some spacing between the menu items.

Proposed solution

In order to regain the blank space I'll either need to change the CSS, or adjust the markup. It makes more sense to use CSS.

[bobbingwide]

It's happened again with WordPress 5.7 and Gutenberg 10.2.1. But I can't rule out stupidity on my part. Time to investigate. From blocks.wp.a2z. This is the menu in the header. The footer's the same.

The change occurred between 10.1.1 and 10.2.0 In the previous fix I changed

.wp-block-navigation li {
    margin-right: 10px;
}

to

.wp-block-navigation-link {
    padding-right: 4px;
}

In the change for 10.2.0 there's some new CSS that I need to check out.

.wp-block-navigation ul li{list-style:none;margin:0;padding:0}

Also, some CSS which appears to target the same class twice.

.wp-block-navigation-link.wp-block-navigation-link { margin: 0; }

[bobbingwide]

It would appear that I didn't need to raise the issue. I just needed to find the right CSS, which for Fizzie is

.wp-block-navigation ul li {
   padding-right: 4px;
}

[bobbingwide]

With Gutenberg 10.3.1 the menu spacing and colours have changed again

10.0.2, 10.1.0, 10.1.1, 10.2.0, 10.2.1

10.3.0, 10.3.1

To fix the spacing I have to remove the right margin that had been added to the inline CSS.

.wp-block-navigation .wp-block-navigation-link {
    margin-right: 0em;
}

To change the link colors I have to override the color: inherit on the links.

.wp-block-navigation .wp-block-navigation-link__content,
.wp-block-navigation .wp-block-pages-list__item__link {
    color: #ffffff;
}

[bobbingwide]

In 10.4.0 the colours are wrong on the single.html page. The foreground colour's supposed to be white, not black. For other templates the colours are as expected.

[bobbingwide]

In 10.6.0-rc.1 the menus have changed again

Looks like all my padding's gone. Now to find what's changed

[bobbingwide]

With 10.7.1, a partly completed theme.json and an unchanged style.css the nav menu currently looks like this.

Note: I also have to restyle the 3 block grid, for blocks, plugins and themes.

[bobbingwide]

I discovered that if you set the background color then it gives a certain amount of padding. I changed the header and header-menu template parts, and style.css to change the font size, weight and colors. The top menu is better now. I happy to leave the bottom menu as is.

[bobbingwide]

With Gutenberg 12.3.0 and/or WordPress 5.9-RC1 the problems are:

• current menu item no longer being highlighted
• colours don't change on hover
• the footer menu doesn't have any padding; left and right

The current menu item highlighting worked fine with Gutenberg 11.8.0, which needs WordPress 5.8 The colour changing worked fine with Gutenberg 11.7.0

[bobbingwide]

Tabulating the above

GB	WP 5.9	WP 5.8.2	Current menu highlight	Hover?
12.3.0	Y	Y	N	N
12.2.0	Y	Y	N	N
12.1.0	Y	Y	N	N
12.0.0	Y	Y	N	N
11.9.0	Y	Y	N	N
11.8.0	N	Y	Y	N
11.7.0	N	Y	Y	Y

[bobbingwide]

I made some changes to includes/navigation-link.php and style.css to implement a new solution that works for Gutenberg 12.3.0 with WordPress 5.9-RC1. However, none of the override logic works when Gutenberg is not activated. Some more work is needed to support WordPress 5.9 on its own.

One solution is to use the official WordPress solution, which is to change the links so that the id attribute is set.

[bobbingwide]

I've fixed the display so that the top menu looks good with:

• Gutenberg 12.3.0 activated
• or WordPress 5.9-RC1 and Gutenberg deactivated

This capture shows the menu when

• Blocks is the current menu item - extra padding on the RHS
• Plugins menu item has focus - border outline
• The mouse is hovering over Themes - white background

[bobbingwide]

Problems:

• The footer menu's not properly styled.
  • Padding missing
  • Font too large
• The Home item has gone missing.

In blocks.wp-a2z.org it currently looks like this

Partial explanation for Home item has gone missing

• Gutenberg is deactivated
• The core/home-link block is not supported in WordPress 5.9-RC1

But this doesn't seem right to me since the Home link was added in Gutenberg 10.7.0

[bobbingwide]

Latest commit delivered in Fizzie v1.2.0 still works with WordPress 6.2-RC1 & Gutenberg 15.3.1 On the home page, in the footer menu the styling doesn't match the header

The styling for the current menu item isn't being applied since it doesn't have class has-current-menu-item-background-color.

.wp-block-navigation .wp-block-navigation-link__content:hover, 
.wp-block-navigation .wp-block-navigation-item__content:hover, 
.wp-block-navigation .current-menu-item > a, 
.wp-block-navigation .has-current-menu-item-background-color > a {
    background: #ffffff;
    border: 1px solid var(--wp--preset--color--woo-deep-purple, #baba54 );
    margin: 0 auto;
    color: #792B0C;
    text-decoration: none;

This is because the header-menu template part uses <!-- wp:navigation-link {"label":"Home","url":"https://s.b/wp56/"} /--> but the menu item in the footer-menu template part is created using <!-- wp:home-link {"label":"Home"} /--> I haven't written logic to override the home-link block.

[bobbingwide]

Closing this for now. It can be reopened when the time comes that I want to change the styling of the menu in the footer.