По сути, у меня есть сайт с липким заголовком и навигацией по боковой панели, но когда экран становится меньше, меню принимает кнопку гамбургера, которая может развернуть складную боковую панель.
Это работает, как и ожидалось, за исключениемодна вещь: включение загрузочного CSS CSS cdn.
Так что, если я закомментирую CDN для загрузочного CSS, он будет работать правильно, но если я включу его и сделаю экран мобильного размера, после нажатия кнопки меню,меню расширяется под основным содержимым карточек в основном разделе.Если я закомментирую это, меню расширяется сверху карточек, как и должно быть.
В моем коде выше есть загрузочный CDN, чтобы показать ошибку.У меня есть собственный CSS, который также прикреплен к нему, и у меня там много стилей, мне просто интересно, как я могу исправить это и при этом иметь загрузочный CSS для других устройств.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src=""/>
</div>
<div class="page-details"></div>
<div class="settings">
<div class="menu-button profile">
<i class="material-icons">person</i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src=""/>
</div>
<ul>
<li>
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">adb</i>
<span>Menu Item with a Long Name</span></a></li>
<li>
<a href="#">
<i class="material-icons">android</i>
<span>Android</span></a></li>
<li>
<a href="#">
<i class="material-icons">attachment</i>
<span>Attachments</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">bookmark</i>
<span>Bookmarks</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">star</i>
<span>Favorites</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i>
<span>Configuration</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">cake</i>
<span>Birthday Party</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">brush</i>
<span>Designer</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">camera</i>
<span>Photos</span>
</a>
</li>
</ul>
</nav>
<!--These are the cards that the menu expands underneath-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>