Итак, я хочу применить CSS только для мобильного (гамбургерного) меню. Я предполагаю, что вы могли бы сделать что-то вроде экрана @media и стиля (max-width: 600px) для ширины, где он изменяется, но это кажется беспорядочным.
Есть ли стиль, который относится только к мобильному меню? Таким образом я мог бы сделать что-то вроде:
.mobile-menu .nav-link {
colour: red;
padding: 40px;
}
, чтобы сделать только мобильное меню красным и дополнить его до 40 пикселей, а меню рабочего стола останется обычным. Если нет установленного стиля, как лучше всего создать CSS, который будет влиять только на элементы мобильного меню?
Чтобы помочь, вот код html:
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img class="img-fluid d-md-none" src="images/banner_logo_small.png">
<img class="img-fluid d-none d-md-block" src="images/banner_logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COMMUNITY SUPPORT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
А вот код в. css:
.navbar {
background:#FF8200;
padding: 0;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
padding: 0;
}
.nav-link {
margin-right: 1em !important;
font-weight: bold;
}
.nav-link:hover {
color: #3D3935;
}
.navbar-collapse {
justify-content: flex-end;
}
.d-md-none .navbar-collapse {
padding: 200px;
color: red;
}
Итак, на данный момент цель состоит в том, чтобы только элементы в мобильном меню имели отступ 200 пикселей и становились красными.
Вот пример: https://www.codeply.com/p/uVOV67zz6E, чтобы поиграть, чтобы пункты меню на мобильном устройстве стали красными, а на рабочем столе оставались белыми.
Проблема с конечно, находится в Bootstrap, это те же элементы в меню мобильного и рабочего стола, bootstrap просто меняет css в зависимости от ширины страницы.