то я искал и ищу руководство в этом безрезультатно.

По сути, я просто хочу иметь боковую панель, но когда экран становится маленьким, то есть размером экрана смартфона, он превращается в панель навигации.

Мой HTML-код для боковой панели таков:

<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>

Мой CSS:

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

Я понятия не имею, как получить это в navbar. Все, что я знаю, это как сделать навигационную панель с самого начала, но я этого не хочу! Я не хочу ничего из этого причудливого анимированного наложения, многоцветного аккордеона, чего угодно, пожалуйста.

Спасибо :)