Así que he estado buscando y buscando orientación en esto sin resultado.

Básicamente, solo quiero tener una barra lateral, pero cuando la pantalla se vuelve pequeña, es decir, el tamaño de la pantalla de los teléfonos inteligentes, se transforma en una barra de navegación.

Mi código HTML para la barra lateral es este:

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"></a>  -->
    <ul>
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

Mi CSS:

#fixed-sidebar {
    position: fixed;
    max-width: 20%;
    color: white;
}

No tengo idea de cómo meter eso en una barra de navegación. Todo lo que sé es cómo crear la barra de navegación desde el principio, ¡pero no quiero eso! No quiero nada de ese elegante acordeón animado superpuesto multicolor, lo que sea, por favor.

Gracias :)