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

Question

[TheTrace]

Всем добрый вечер! Задаюсь вопросом, как сделать так же, как на картинке, что для этого используется и как это реализовать. Вообще, похоже на Bootstrap, но там немного другое. (Когда приближаю экран, то есть планшет/телефон меняется меню).

Answer 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рх)

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

Comments

[TheTrace]

Я не понял как меню превращается в кнопку и как оно при нажатии перекрывает весь экран.(

[ma4t]

TheTrace, чет не заметил кнопку из-за того что на мобилке пункты меню внизу посередине.
Вы верстаете это меню(этот блок) так как оно должно быть, на весь экран, придаете ему вид который должен быть. Если оно перекрывает весь экран значит скорее всего это pop-up (загуглите) , который задан через position:fixed.
Просто изначально у него прописано display: none, а при клике на кнопку ему приписывается display: block/flex (выбрать нужное) и все.

На определенной точке перехода , например 768рх, у этого блока меняются стили, уходит position: fixed и он уже становится как обычный блок и вступает в поток, а кнопка получает dysplay: none.

Либо есть вариант, сверстать двумя блоками сам pop-up с кнопкой, которые видны только на мобилке, а начиная с планшета появляется другой блок, который уже вам нужен в потоке.

[ma4t]

TheTrace, в общем вы должны сверстать блок, как он вам нужен и спрятать его display:none, а кнопка лишь задает ему видимость.