SWITCH FROM VERTICAL MENU TO HORIZONTAL MENU

Question

In my app, I have a vertical menu (desktop view) and I need it to turn into a horizontal menu (when the view changes to mobile)

Follow below the codes HTML

<nav class="sidebar-menu">
  <ul>
    <li class="sidebar-menu__item">
      <router-link v-b-tooltip.hover.right="'Dashboard'" to="/home">
        <span class="icon-home icon"></span>
      </router-link>
    </li>
    <li class="sidebar-menu__item">
      <router-link v-b-tooltip.hover.right="'Dashboard Conciliação'" to="/conciliacao">
        <span class="icon-conciliacao"></span>
      </router-link>
    </li>
    <li class="sidebar-menu__item">
      <router-link v-b-tooltip.hover.right="'Fluxo de Caixa'" to="/fluxo-de-caixa">
        <span class="icon-fluxo"></span>
      </router-link>
    </li>
    <li class="sidebar-menu__item">
      <router-link v-b-tooltip.hover.right="'Transações'" to="/recebimentos-pagamentos">
        <span class="icon-rec_pag"></span>
      </router-link>
    </li>
    <li class="sidebar-menu__item" v-if="hide()">
      <router-link v-b-tooltip.hover.right="'Ajuda'" to="/ajuda">
        <span class="icon-ajuda"></span>
      </router-link>
    </li>
    <li class="sidebar-menu__item">
      <router-link v-b-tooltip.hover.right="'Configurações'" to="/dados">
        <span class="icon-dados"></span>
      </router-link>
    </li>
    <li class="sidebar-menu__item sidebar-menu__ico-fixed">
      <a href="#" v-b-tooltip.hover.right="'Sair'" @click="logout">
        <span class="icon-sign_out"></span>
      </a>
    </li>
  </ul>
</nav>

And the CSS

.sidebar-menu {
  background-color: #233366;
  width: 83px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.sidebar-menu ul {
  list-style-type: none;
  padding-top: 71px;
}

Answer 1

Search on media queries

.sidebar-menu {
background-color: #233366;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;}

.sidebar-menu ul {
list-style-type: none;
padding-top: 71px;}

@media(min-width: 600px) {
  /* codigo para telas acima de 600px */

  .sidebar-menu {
      width: 83px;
      height: 100%;
  }}

tag in html head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">