@TheTrace

Как сделать такой же навбар?

Всем добрый вечер! Задаюсь вопросом, как сделать так же, как на картинке, что для этого используется и как это реализовать. Вообще, похоже на Bootstrap, но там немного другое. (Когда приближаю экран, то есть планшет/телефон меняется меню).
5cf0103773e3f622064676.png5cf0103e5d99c597792476.png5cf0104550881739623087.png
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
@ma4t
не понял в чем трудность.

<div class="main">
		<div class="wrap">
				<div class="block">Projects</div>
				<div class="block">News</div>
				<div class="block">Shop</div>
				<div class="block">About</div>
				<div class="block">Contact</div>
				<div class="block">Home</div>
		</div>
	</div>


.block {
			margin-bottom: 10px;
		}

		.block:last-child {
			margin-bottom: 0;
		}

		@media (min-width: 768px) {
			.main {
				display: flex;
				justify-content: center;
			}

			.wrap {
				display: flex;
			}

			.block {
			margin-right: 10px;
			}

			.block:last-child {
				margin-right: 0;
			}	
		}


делаете их дивками или что у вас там, если не див, пишите дисплей: блок

так как это блоки они встают друг под друга

а потом медиа запросом например начиная с планшет (768рх)

пишите родителю флекс и он встает как надо и самого родителя центрируете.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы