Headline header bug with wide logo

Themes
1

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:

image

However, there’s an issue when the logo is too wide. This can happen:
image
(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:
image

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

2

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

3

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) {
                submenuItems.unshift(nav.lastElementChild);
                nav.lastElementChild.remove();
            } 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]

image
image694×342 28.6 KB