Как добавить отступ слева и ширину только для подпунктов меню и только для развернутой версии меню adminlte?

Question

[verygoodboy]

Всем привет. Я пытаюсь изменить ширину и позицию левого меню известного шаблона https://adminlte.io/themes/v3/pages/forms/general.html

Изначально левое меню в развернутом виде выглядит так (фото 1):

а в свернутом так (фото 2):


Задача сделать так, чтобы у развернутого меню (фото 1) подпункт покрашенный светло серым цветом имел отступ слева ml-3 и ширину width: 218px, чтобы вышло так (фото 3):



При этом, чтобы свернутое меню (фото 2) оставалось без изменений.

Подскажите, пожалуйста, можно ли такое сделать и если можно, то как?

Comments

[Сергей delphinpro]

можно ли такое сделать

ну а почему нет?
задайте внешний отступ для вложенного списка.
Причем сделать это для такого селектора меню, который присутствует только в раскрытой верcии
Селектор подсмотрите в devtools

.selector_menu_for_expanded ul ul {
  margin-left: 1rem;
}

[verygoodboy]

Сергей delphinpro, как раз в этом и проблема, я не могу найти такого селектора, который был бы в развернутой версии меню (фото 1) и его не было бы в свернутой версии фото 2...

[Сергей delphinpro]

verygoodboy, .sidebar-collapse
класс вешается не на меню, а на весь сайдбар
смотрите выше по дереву.

[Сергей delphinpro]

соответственно для развернутого сайдбара

.sidebar-mini:not(.sidebar-collapse)

[verygoodboy]

Сергей delphinpro, Спасибо, что помогли, я бы сам не решил эту задачу.

Answer 1

[xdevelx]

.sidebar-mini:not(.sidebar-collapse) .nav-treeview .nav-link {
  margin-left: 1rem;
  width: calc(250px - 2rem);
}

Специфичность селектора такая, чтобы переопределить уже существующие значения.

Comments

[verygoodboy]

Спасибо, большое! Работает. Пока что для меня это незнакомая тема...