Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jekyll minima header problems on mobile

I'm creating a personal website (petermattia.com, live but still under construction) using Jekyll Minima. Overall no problems on the desktop site. However, on mobile (Safari), the hamburger menu has extra white space before the first menu item:

Screenshot

What's worse is if I click in the whitespace, I get directed to either the 404 page, or the raw HTML of a post.

I do have some custom header code (shown below) - nothing too fancy, it just changes the page order. Any suggestions?

  <div class="wrapper">
    {% assign default_paths = site.pages | map: "path" %}
    {% assign page_paths = site.header_pages | default: default_paths %}
    <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>

    {% if page_paths %}
      <nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
              <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
              <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger">
          {% assign sorted_pages = site.pages | sort:"order" %}
          {% for p in sorted_pages %}
          {% if p.order != -1 %}
          <a class="page-link" href="{{ p.url | relative_url }}">{{ p.title | escape }}</a>
          {% endif %}
          {% endfor %}

        </div>
      </nav>
    {% endif %}
  </div>
</header>
like image 951
Pete Avatar asked Jul 05 '26 23:07

Pete


1 Answers

Resolved! This was the offending line: {% if p.order != -1 %}

This identified all pages, including the 404 page, my post, etc. I modified it to: {% if p.order != -1 and p.order %}

like image 50
Pete Avatar answered Jul 09 '26 14:07

Pete