Как сделать элементы меню navbar видимыми только для мобильных устройств?

Question

Моя навигационная панель выглядит на рабочем столе следующим образом:

Отлично работает на мобильных устройствах.

Я хочу отображать элементы один за другим на рабочем столе и сделайте значок меню vani sh.

Мой код:

.nav a{
  color: white !important;
  font-size: 20px;
}
.navbar-brand{
  color: white !important;
  font-size: 20px;
  font-family: sans-serif;
}
a:link {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}
a:visited {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}

Как это исправить?

Answer 1

Для этого можно использовать шаблон navbar по умолчанию.

После 992px значок меню вашего гамбургера изменится на sh, а пункты меню будут показаны горизонтально.

до 992px, ваше меню гамбургера будет отображаться, и пункты меню будут отображаться по вертикали с функцией свертывания.

Вы можете управлять px с классом navbar-expand-*, я использовал класс navbar-expand-lg здесь где lg обозначает 992px

.nav a {
  color: white !important;
  font-size: 20px;
}

.navbar-brand {
  color: white !important;
  font-size: 20px;
  font-family: sans-serif;
}

a:link {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}

a:visited {
  font-size: 17px;
  color: #D4E1E4;
  text-decoration: none;
}