Bootstrap: элементы навигационной панели перемещаются, когда я уменьшаю ширину страницы

Question

У меня есть две навигационные панели, одна над другой. Эта верхняя панель тоньше с двумя элементами навигации. Эти элементы выровнены по правой стороне страницы. Я установил его так, чтобы он не разрушался при уменьшении ширины страницы. Однако, когда я уменьшаю страницу слишком сильно, элементы, кажется, исчезают, я думаю, что она движется вниз за другой навигационной панелью.

Мне бы хотелось, чтобы эти два элемента навигации были статическими на странице независимо от ширины страницы

CSS:

body {
    padding-top: 105px;
}

.navbar-top-custom {
    height: 28px;
    background-color: rgba(32, 32, 32, 1);
}

.navbar-bottom-custom {
    margin-top: 28px;
    height: 56px;
    background-color: rgba(53, 53, 53, 1);
}

.navbar-top-custom .nav-item{
    color: rgb(211, 211, 211) !important;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

HTML:

<nav class="navbar navbar-expand-sm navbar-top-custom fixed-top">
    <ul class="nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-question-circle" style="padding-right: 5px"></i>  Knowledge Base</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-user-circle" style="padding-right: 5px"></i>  Client Login</a>
        </li>
    </ul>   
</nav>

полный скриншот экрана:

уменьшить ширину экрана:

Edit:

Таким образом, при загрузке, похоже, виртуально складывается <li> при уменьшении разрешения. Есть ли способ предотвратить это поведение?

Answer 1

Я думаю, что это проблема с height, который вы установили для .navbar-top-custom. Попробуйте удалить height и изменить padding <nav> или <a>.