Would i ask something? when hamburger menu was opened and closed, contents in menu were distored..

[Developer-Brandon]

My title is all about my explanation.
When menu was opened or closed, all contents in menu were distored.
I can't guess why this happening so i will attach my code and screen as below.

1. html

<Slide
          width="140"
          :close-on-navigation="true"
          disable-esc
        >
          <div class="slider__header">
            <p class="slider__header__main-title">
              <router-link
                id="home-from-hb"
                class="menus font-regular"
                to="/"
              >
                <img
                  class="logo-by-hb"
                  alt="해피홈리페어"
                  src="@/assets/images/logos/main-title-logo-black-version.png"
                />
              </router-link>
            </p>
          </div>
          <router-link
            id="products-from-hb"
            class="menus-from-hb"
            to="/Products"
          >
            <span>
              제품소개
            </span>
          </router-link>
          <router-link
            id="introduce-company-from-hb"
            class="menus-from-hb font-regular"
            to="/About"
          >
            <span>
              회사소개
            </span>
          </router-link>
          <router-link
            id="notice-from-hb"
            class="menus-from-hb font-regular"
            to="/Notice"
          >
            <span>
              공지사항
            </span>
          </router-link>
          <router-link
            id="inquiry-from-hb"
            class="menus-from-hb font-regular"
            to="/Inquiry"
          >
            <span>
              견적문의
            </span>
          </router-link>
          <br />
          <br />
          <br />
          <br />
          <div class="slider__footer">
            <div class="sns-channels">
              <div class="wrap-sns-logo">
                <img
                  class="logo"
                  alt="인스타그램"
                  src="@/assets/images/logos/sns/icon-instagram.png"
                />
              </div>
              <div class="wrap-sns-logo">
                <img
                  class="logo"
                  alt="네이버 블로그"
                  src="@/assets/images/logos/sns/icon-naverblog.png"
                />
              </div>
              <div class="wrap-sns-logo">
                <img
                  class="logo"
                  alt="카카오톡"
                  src="@/assets/images/logos/sns/icon-kakaotalk.png"
                />
              </div>
            </div>
          </div>
        </Slide>

2. css

    .slider {
        &__header {
            text-align: center;
            margin-right: 10%;
            &__main-title {
                margin: 0 auto;
            }
        }
        &__footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 200px;
            border-top: 1px dotted rgba(211, 211, 211, 0.8);
            background-color: rgba(211, 211, 211, 0.4);
            .sns-channels {
                width: 120px;
                height: 45px;
                padding-top: 10px;
                .wrap-sns-logo {
                    @media (max-width: $screen-mobile) {
                        display: inline-block;
                        float: right;
                    }
                    .logo {
                        width: 40px;
                        height: 40px;
                        margin-right: 10px;
                        opacity: 0.5;
                        transition: 0.3s;
                        &:last-child {
                            margin-right: 0;
                        }
                        &:hover {
                            opacity: 1;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }

3. Image
   3-(1). Process of opening
   

3-(2). Result of opening

Thanks for reading

[zburk]

I had a similar issue. I added a no-wrap property which fixed it. Looks like #58 is the same issue.

[Developer-Brandon]

I had a similar issue. I added a no-wrap property which fixed it. Looks like #58 is the same issue.

@zburk

I found how solve this problem myself
I didnt designate width property. I just designated 100% like this -> width: 100%;
If i designated width to 150px, that's solved!

Thanks for reading^^