How to hide table of contents on mobile devices

Question

I am doing my first clumsy steps to set up a blog (with Hugo, via blogdown / R) and struggle with my floating table of contents. After lengthy trial and error I have been able to set it up, however, I am unable to hide the table of contents when using a mobile device.

The styling of the site happens via tachyons.io / css, and so far I figured that I have to set the 'float right, not small' (fl-ns) (see here). Unfortuantely, that's been to no avail and I don't know how to proceed.

Here's the code defining the table of contents:

    {{ if .Params.toc | default true}}
  <div class="fr-ns fr-nm" id="sidebar-wrapper">
    <div id="sidebar">      
      <ul class="nav nav-pills nav-stacked fr-ns fr-nm" style="list-style:none;">
         <!-- ignore empty links with + -->
        {{ $headers := findRE "<h[1-3].*?>(.|\n])+?</h[1-3]>" .Content }}
        <!-- at least one header to link to -->
        {{ $has_headers := ge (len $headers) 1 }}
        {{ if $has_headers }}
          {{ range $headers }}
            {{ $header := . }}
            {{ range first 1 (findRE "<h[1-3]" $header 1) }}
              {{ range findRE "[1-3]" . 1 }}
                {{ $head_level := (int .) }}
                {{ $base := ($.Page.File.LogicalName) }}
                {{ $anchorId := ($header | plainify | htmlEscape | urlize | safeURL) }}
                <li class="toc-h{{ $head_level }} no-underline"><a href="#{{ $anchorId }}">
                    {{ $header | plainify | htmlEscape }}
                </a></li>
              {{end}}
            {{end}}
          {{ end }}
        {{ end }}
      </ul>
    </div>
  </div>
{{end}}

Here is the relevant part in the style.css file:

#sidebar-wrapper {
    max-width: 20px;
}

#sidebar {
    position: fixed; 
    top: 140px;
    /*background-color:gray;*/
}

@media (--breakpoint-not-small) {
  fr-ns {float: right; _display: inline; }
}

#sidebar > ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.nav-stacked>li>a {
    list-style-type:none;
    text-decoration:none;
    margin: 0px;
    color:black;
    text-align:left;
}



.toc-h1 {
    font-size: 100%;
    font-color:orange;
    text-decoration:none;
}

.toc-h2 {
  font-size: 90%;
  padding-left: 20px;
}

.toc-h3 {
  font-size: 90%;
  padding-left: 40px;
}

The code to the entire blog is visible here.

I know it's a long shot, but if anyone has an idea - many thanks!

Answer 1

Think i got it. With the screen is smaller than 600px, the ToC will not be shown.

@media screen and (max-width: 600px) {
  #sidebar {
    display: none;
  }
}