导航栏折叠断点查询

Question

我目前正在尝试解决有关断点的此问题：

这是我的附带代码：

.navbar-main {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;

    .navbar-toggler-icon {
        background-image: $navbar-dark-toggler-icon-bg;
    }
}

.navbar .navbar-nav {

    .nav-link {
        font-size: $navbar-nav-link-font-size;
        text-transform: $navbar-nav-link-text-transform;
        letter-spacing: $navbar-nav-link-letter-spacing;
        font-weight: $navbar-nav-link-font-weight;
        @include transitions(.8s, $transition-bezier-card);

        @include media-breakpoint-down(md) {
            font-size: 1.2rem;
        }

        .nav-link-inner-text {
            margin-left: .25rem;
        }
    }

    .nav-item {
        .media:not(:last-child) {
            margin-bottom: 1.5rem;
        }
    }

    .dropdown {

        .dropdown-menu {
            top: calc(100% + 7px);
        }

        .dropdown-item {
            font-weight: $navbar-dropdown-item-font-weight;
            font-size: 0.875;

            @include media-breakpoint-down(md) {
                font-size: 1.2rem;
            }
        }

    }

    .dropdown-megamenu {
        @include media-breakpoint-up(lg) {
            min-width: 580px;
        }


        .megamenu-link {
            color: $gray;
            font-weight: 400;
            font-size: $font-size-sm;
        }

        .megamenu-item {
            position: relative;

            &:hover {

                .megamenu-link {
                    color: $primary;
                }

            }


        }


    }

在哪里调整断点以避免当前按钮重叠？

这是随附的HTML：

  <header class="header-global">
    <nav id="navbar-main"
        class="navbar navbar-main navbar-expand-lg navbar-expand-md navbar-expand-sm headroom py-lg-3 px-lg-6 @@classes">
        <div class="container">
            <a class="navbar-brand @@logo_classes" href="@@path_common/index.html">
                <img class="navbar-brand-dark img-responsive common" src="@@path/assets/img/brand/re.png"
                    height="50" alt="Logo light">
                <img class="navbar-brand-light common" src="@@path/assets/img/brand/dark.svg" height="35"
                    alt="Logo dark">
            </a>
            <div class="navbar-collapse collapse" id="navbar_global">
                <div class="navbar-collapse-header">
                    <div class="row">
                        <div class="col-6 collapse-brand">
                            <a href="@@path_common/index.html">
                                <img src="@@path/assets/img/brand/dark.svg" height="35" alt="Logo Impact">
                            </a>
                        </div>
                        <div class="col-6 collapse-close">
                            <a href="#navbar_global" role="button" class="fas fa-times" data-toggle="collapse"
                                data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false"
                                aria-label="Toggle navigation"></a>
                        </div>
                    </div>
                </div>

到目前为止，我已经尝试过使用col-md-6等和中/最大宽度设置，但是未能成功解决该问题。