Настройки с помощью css и vue

Я новичок в этом, и я учусь, но мне трудно придать ему стиль, с которым я работаю.

Поискав в Интернете, я нашел несколько примеров, но пока мне ничего не помогло

Мой код Vue

<div class = "panel-group" id = "accordion-mbl-menu">
      <div class = "panel">
        <b-navbar-toggle target = "collapse-cat-lvl1-469">
          Accesorios
          <img src = "@/assets/images/layout/menu/chevron.svg" class = "icon">
        </b-navbar-toggle>
        <div style = "background-color:white;">
          <b-collapse id = "collapse-cat-lvl1-469">
            <div data-cat-acc = "473" class = "grid-item parent-lvl-2">
              <a class = "link sty-1 grid-sty-1" href = "#" target = "_self" data-menu-item-id = "473">
                <span class = "text">GTI</span>
              </a>
            </div>
            <div data-cat-acc = "474" class = "grid-item parent-lvl-2">
              <a class = "link sty-1 grid-sty-1" href = "#" target = "_self" data-menu-item-id = "474">
                <span class = "text">Pets</span>
              </a>
            </div>
            <div data-cat-acc = "475" class = "grid-item parent-lvl-2">
              <a class = "link sty-1 grid-sty-1" href = "#" target = "_self" data-menu-item-id = "475">
                <span class = "text">Vintage</span>
              </a>
            </div>
            <div data-cat-acc = "490" class = "grid-item parent-lvl-2">
              <a class = "link sty-1 grid-sty-1" href = "#" target = "_self" data-menu-item-id = "490">
                <span class = "text">Colaboraciones especiales</span>
              </a>
            </div>
          </b-collapse>
        </div>
      </div>
      <div class = "panel">
        <b-navbar-toggle target = "collapse-cat-lvl1-471">
          Colecciones
          <img src = "@/assets/images/layout/menu/chevron.svg" class = "icon">
        </b-navbar-toggle>
      </div>
      <div class = "panel">
        <button type = "button" class = "navbar-toggler collapsed"> ¿Necesitas ayuda? </button>
      </div>
    </div>

Мой CSS

        @media (min-width: 829px) {
      .navbar-greetings, .login-section{display: none}

      #menu-header.collapse:not(.show){
        display: block;
      }

      #menu-header{
        position: fixed;
        top: 25px;
        max-width: 83%;
        margin: 0 auto;
        left: 8.32%;
        .panel{
          button{
            display: block;
            color: white;
            font-size: 13px;
            font-family: 'VWHead-Bold';
          }
        }
        #accordion-mbl-menu{
          display: flex;
        }
      }
    }
    /**
      estilos del menu desplegable
    **/
    @media (max-width: 828px) {
      #menu-header.show {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
      #menu-header {
        display: block ;
        position: fixed;
        z-index: 1;
        background-color: #FFF;
        left: 0;
        top: 100px;
        height: -webkit-calc(100% - 50px);
        height: -moz-calc(100% - 50px);
        height: calc(100% - 50px);
        width: 90%;
        padding: 20px 20px;
        max-width: 87.5%;
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: all 350ms ease;
        -moz-transition: all 350ms ease;
        -ms-transition: all 350ms ease;
        -o-transition: all 350ms ease;
        transition: all 350ms ease;

        .grid-sty-1 {
            height: 55px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-box;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            align-items: center;
            height: 40px;
            font-size: 16px;
            font-family: "VWHead-Bold", sans-serif;
            position: relative;

            a{
                text-decoration: none;
                outline: none !important;
                padding-right: 15px;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            > .text {
                padding-left: 15px;
                color: #001E50;
            }
        }

        .navbar-greetings{
          font-family: 'VWHead-Regular';
          font-size: 24px;
          line-height: 29px;
          display: flex;
          align-items: center;
          color: #001E50;
        }

        .scroll-outer{
            height: auto;
            margin-bottom: 0px;
            margin-right: 0px;
            max-height: 404px;

            .scroll-content.scroll-scrolly_visible {
              left: -12px;
              margin-left: 12px;
            }
        }

        .scroll-wrapper {
            overflow: hidden!important;
            padding: 0!important;
            position: relative;

            > .scroll-content {
                border: none!important;
                box-sizing: content-box!important;
                height: auto;
                left: 0;
                margin: 0;
                max-height: none;
                max-width: none!important;
                overflow: scroll!important;
                padding: 0;
                position: relative!important;
                top: 0;
                width: auto!important;
            }
        }

        #accordion-mbl-menu {
          margin: 0;

          .panel {
            box-shadow: none !important;
            background-color: transparent;
            border-radius: 0;
            border: 0;
            margin-bottom: 0;

            > button.collapsed {
              color: #001e50;

              > .icon{
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
              }
            }

            > button.not-collapsed > .icon {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            > button {
              margin: 0px;
              padding: 0px;
              width: 100%;
              height: 55px;
              font-size: 20px;
              font-family: "VWHead-Bold";
              font-weight: normal;
              color: #2f3538;
              text-decoration: none;
              outline: none !important;
              border-bottom: 1px solid #dee1e3;
              padding-right: 15px;
              position: relative;
              display: -webkit-box;
              display: -webkit-flex;
              display: -moz-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -moz-box-align: center;
              -ms-flex-align: center;
              align-items: center;

              > .icon {
                width: 20px;
                height: 20px;
                fill: currentColor;
                -webkit-transition: all 350ms ease;
                transition: all 350ms ease;
                position: absolute;
                right: 15px;
                top: auto;
              }

              .collapse.in {
                display: block;
              }
            }
          }
        }

        .login-section {
            height: 36px;
            position: fixed;
            bottom: 56px;
            width: 100%;

            a {
                font-family: "VWText-Regular";
                color: #000000;
                font-size: 14px;
                height: 100%;
                width: 100%;

                img.icon {
                  position: relative;
                  top: -5px;
                  width: 24px;
                  height: 24px;
                }

                .text-account {
                  padding-left: 5px;
                  position: relative;
                  top: 2px;
                }
            }
        }
      }

      #remove-fears-header ~ #menu-header {
        height: -webkit-calc(100% - 85px);
        height: -moz-calc(100% - 85px);
        height: calc(100% - 85px);
      }

      #menu-header.scroll-content.scroll-scrolly_visible {
        padding-right: 8px;
      }
    }

Я знаю, что вложил много кода, но если кто-то может подсказать мне, как это сделать, у меня действительно есть следующее:

введите описание изображения здесь

Но я хочу добраться до этого:

введите описание изображения здесь

Также мне не удалось сделать то, что выбранное меню подчеркнуто.

заранее большое спасибо