Invalid HTML in header.php causing mobile menu issues

Hi,

I’ve been chasing a mobile layout bug on my site (running North child theme, WooCommerce enabled) and traced it back to a couple of markup issues in the parent theme’s header.php. Wanted to report these since they’re not specific to my setup — anyone running North with the cart icon enabled in the menu will hit the same thing.

Issue 1: invalid div inside ul in the shopping cart dropdown
Around the mini-cart in the main navigation, the widget is rendered like this:

<ul class="shopping-cart-dropdown" id="cart-drop">
    $instance = array( 'title' => '' );
    the_widget( 'WC_Widget_Cart', $instance );
</ul>

Since no before_widget/after_widget args are passed, the_widget() falls back to its default wrapper, which is a div with class “widget %s”. That means the actual output is a div sitting directly inside a ul, with no li in between — which is invalid HTML (a ul can only contain li or script-supporting elements as direct children). I confirmed this by viewing the rendered source and running it through the W3C validator, it flags it as “Element div not allowed as child of element ul.”

Browsers apply their own error-recovery when they hit this, which can end up restructuring the DOM around the nav differently than the markup implies — on my site this was contributing to the mobile menu breaking on real devices, not just a validator nitpick.

A simple fix would be to pass explicit wrapper args so it renders as a valid list item, e.g. setting before_widget to a li tag with the widget class, and after_widget to the closing li tag.

Issue 2: label nested inside button for the search toggle

Also in header.php, the search toggle button wraps a label element with class “screen-reader-text” around the translated “Open search bar” text, inside the button tags.

A label is not allowed as a descendant of a button per the HTML spec (validator flags this too). Since this is just a screen-reader-only text string and not an actual form label, it doesn’t need to be a label at all — a plain span with class “screen-reader-text” would carry the same accessibility behavior without the invalid nesting.

Happy to provide more detail or a full validator report if useful. Running into this on a fairly standard setup (WooCommerce + cart icon enabled in the header), so I’d guess it affects most sites using this combination.

Thanks for maintaining the theme!