Always show masthead hamburger menu on page

[TheNathanSpace]

Is there a way I can make it so that, on a certain page, the masthead defaults to the hamburger menu, instead of showing each navigation link? I can add

<style>
body.layout--single_wide .visible-links {
  display: none;
}
</style>

to the page to disable the links, but I'd like them collapsed in the hamburger menu instead.

Thanks!

[TheNathanSpace]

I FINALLY GOT IT WORKING! My solution consisted of:

In masthead.html, adding this somewhere on the page:

{% if include.hamburger_only %}<div class="do-hamburger-only"></div>{% endif %}

In default.html, editing the include_cached masthead.html to:

{% include_cached masthead.html hamburger_only=page.hamburger_only %}

In jquery.greedy-navigation.js, adding this to the check() function:

    // console.log("do-hamburger-only = " + $('.do-hamburger-only')[0]);
    if ($('.do-hamburger-only')[0]) {
        $vlinks.children().each(function () {
            $(this).appendTo($hlinks);
        });
        numOfVisibleItems = 0;
        
        // Update the button accordingly
        $btn.attr("count", numOfItems - numOfVisibleItems);
        if (numOfVisibleItems === numOfItems) {
          $btn.addClass('hidden');
        } else $btn.removeClass('hidden');
        
        return;
    }

(You'll need to rebuild main.min.js with the command npm run build:js).

Then, in the page .md file you want to use the hamburger menu, adding the front matter variable hamburger_only: true.

I know my solution is really hacky, but I'm not a web developer, so I don't know a better way. It works, at least!!