Headline header bug with wide logo

The Headline theme has a nice trick on iPad (and other narrow but not phone-sized screens). It moves some of the menu items into a dropdown menu. It looks good here:


However, there’s an issue when the logo is too wide. This can happen:
(note the total lack of menu - hard to navigate at that width!)

Or on slightly larger screens, the dropdown button is present, but the dropdown is offscreen:

Are we filing bugs/PRs against Ghost standard themes on Github, or elsewhere?

Thanks for documenting this! You can raise an issue here: Issues · TryGhost/Themes · GitHub :pray:

Documenting the fix here: I don’t have my dev environment set up today (actually trying to do some paying client work!) in a way that’ll easily generate a PR. If someone wants to grab it and run with it, please do.
Here’s the fix needed. There are likely multiple themes impacted, but it’s only going to happen in a limited range of screen widths (and possibly none if the header image is narrow):
in node_modules/@tryghost/shared-theme-assets/assets/js/v1/lib/dropdown.js:

    const makeDropdown = function () {
        if (mediaQuery.matches) return;
        const submenuItems = [];

        while ((nav.offsetWidth + 64) > menu.offsetWidth) {
            if (nav.lastElementChild) {
            } else {
                //return; broken code
                break; // new code

In short, line 27 should be a BREAK, not a RETURN.

In addition, styling is wrong on .gh-dropdown. This can be corrected (for anyone who needs a fix NOW) with code injection:

    .gh-dropdown {
        left: 0!important;
        right: unset!important;
        width: fit-content;

Aside: Code injection not extensively tested with a variety of nav menu lengths - it fixes MY problem, but it may need a media query if you’re getting the … showing up before the navigation rearrangement at 992px.

Aside #2: The navigation rearrangement at max-width 991px is sort of silly. It’s not really an improvement over a hamburger menu (again, at least for wide logos…)
[image below has my patch above added already]