Наложение вертикальной навигации с левой стороны с верхней навигацией в начальной загрузке 4

Question

Я пытаюсь создать интерфейс администратора с помощью начальной загрузки 4, где у меня есть два меню.Один вертикальный, а другой на верхней панели.Я хочу, чтобы навигация была примерно такой:

При этом я попробовал что-то подобное в своем HTML-коде:

<div class="dashboard">
    <nav class="navbar navbar-expand-sm bg-white">
        <ul class="navbar-nav mr-auto">
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Test 1</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Test 2</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Test 3</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                </div>
            </li>
        </ul>
    </nav>

    <div class="nits-nav-left-aside bg-white">
        <nav class="navbar navbar-light navbar-expand-sm px-0 flex-row flex-nowrap">
            <ul class="nav flex-sm-column flex-row">
                <li class="nav-item">
                    <a href="#" class="nav-link">Side 1</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Side 2</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Side 3</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownSideMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Side
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownSideMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</div>

А в части CSS я использую что-то вроде этого:

.dashboard {
    color: #0a0302;
    height: 100%;
    background-color: #EAEDED;
 }

 nav {
    vertical-align: top;
    height: 70px;
    box-shadow: 0 4px 25px rgba(0,0,0,.2);
 }

 .nits-nav-left-aside {
    top: 0;
    left: 0;
    position: absolute;
    padding: 0;
    width: 70px;
    height: 100%;
    z-index: 10;
  }

 .nits-nav-left-aside > nav > ul {
    top: 100px;
  } 

Но почему-то мой интерфейс выглядит примерно так:

Для справки: ссылка для просмотра макета: http://demo.nitseditor.com/html#/dashboard

Помогите мне с этим.

Answer 1

вы задали фиксированную высоту от 70px до nav , что создает проблему, попробуйте указать высоту отдельному классу вместо nav

Answer 2

Посетите мой сайт: webawesome.000webhostapp.com

Затем перейдите к проверке> источников> webawesome Посмотрите на мои CSS, JavaScript и HTML.