Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, так как вы вырезали кусок макета, так там даже лого не по центру.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, у вас в макете разные расстояния между крайними буквами ссылок.
Можно попытаться вычислить ширину и/или отступы.
Имея на руках макет это сделать легче, особенно если он в фигме, а дизайнер немножко в своем уме.
Вы можете хоть фикс значения ширины поставить, можно в vw, чтобы это немножко адаптировалось.

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

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

Нет тут никакого правильно.
Разве что попросить дизайнера не отрезать человеку кусок головы в кепке и кисть руки.

Сверстать можно как угодно:
- clip-path и сдвиг
- фон и поверх тексты и кнопки
- комбинации этих решений

Полоски краски тоже можно поверх сделать.

Я бы, наверное, принимала решение после изучения как это должно выглядеть при адаптиве.

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

Попробуйте еще раз вставить картинку через кнопку в редакторе. Так чтобы её сразу было видно или внутри спойлера.
Но точно без переходов куда-то там на joxi и тем более с редактированием ссылки.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, в песочнице у вас два минуса перед шириной лого

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus,
Всего 100%
Отступы между пунктами 20
Всего их 4
Ещё 2 отступа по 40
И какая-то там ширина логотипа.

Вычислите ширину пункта, если их 6?

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, выглядело бы также
width calc((100% - 40*6 - лого)/6)
и margin-left auto для 6n-2

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, https://codepen.io/AnnaSummer/pen/MWGRzRN

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus,
Можно:
- Посчитать ширину пунктов меню и отступы между ними.
- Задать justify-content: center при равных значениях ширины для li и этот ваш фикс отступ в (ширина лого + 2х40px) 4му элементу.
- Равномерно распределить гридами, задав средней ячейке ширину логотипа. Если отступы между li и вокруг лого разные, то учитывать это при создании центральной ячейки

Что-то типа
repeat(3, 1fr) ширина-лого repeat(3, 1fr)
и gap

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, флекс-то где?
Для инлайн-блоков margin auto не сработает.

Допустим если нужно отступ между логотипом другой сделать ?

Если вам нужно четко в px, то ради бога.
Собственно вопрос переполнения такого меню это скорее вопрос к дизайнеру.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, что именно написать на примере
:nth-child(6n-2) {margin-left: auto}?
Или display: flex?

Как-то вы меня смутили... там и писать-то больше нечего

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus,

Вот тоже думал на этот счет, но что-то не получается

Да прекрасно всё получается.

Если предполагается, что элементов может быть больше, то номера нужно указывать через n.
6n - 3 типа того

Также нужно подумать, если в доп строке будет 4 элемента, то куда он должен попасть. Под 6ой или под 4.
Если под 6ой, то margin-left auto только у 4 элемента в строке.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, любым удобным вам способом
- margin
- грид
- флекс
можно в сочетании с nth-child

Как сделать блок, пропорциональный своей высоте?

А высота при этом откуда берется?

А еще лучше озвучьте всю истинную задачу.

Как сделать так, чтобы figure не занимал всю ширину сайта?

Смотрите, вот я задала inline-block для figure и она перестала растягиваться на всю ширину...
https://codepen.io/AnnaSummer/pen/YzLBEGr

В современном мире для построения сеток используют флексы и гриды, а не инлайн-блоки.
А для ширины можно задавать fit-content, min-content, max-content

На будущее: всегда делайте песочницы, в которых можно увидеть что именно у вас не получилось.

Как сделать так чтобы код был виден постоянно без скролинга?

Ипатьев,

Во-первых, надо не ваять огромные простыни кода, а разбивать его на боле мелкие функции.

Довольно сложно разбивать на мелкие функции, например, тексты.
А скопированные откуда-то они будут в одну строку без переносов.
Сидеть и тыкать переносы занятие сомнительное.

Ещё бывает чужой код, который тоже как-то нужно рефакторить.
Хорошо бы его видеть.

Также мы не знаем на каком языке пишет автор. В HTML,например, в основном принято писать атрибуты в строчку. Встречала редкие проекты, в которых в кодгайде просили писать их в столбик. Большинству это неудобно. Аналогично длинные SVG и в разметке и в стилях.

Могу еще придумать случаи, когда именно переносы помогут делу, но думаю, что уже и так понятно.

Но вы, конечно, правы что выступаете за чистоту кода. Тут я поддерживаю.
Но не всегда чистота это коротенькие строки.

Как поместить текст на уровне геометрической фигуры?

lesha2008, извините, но я по-прежнему вижу картинки не тут в спойлере, а ссылками куда-то там.
И песочницы тоже не вижу.

Но ответить могу:
1. В современном мире для построения сеток используют флексы и гриды.
Флоаты используют только по назначению - для обтекания одного элемента другими или текстом.
В вашем макете никакого обтекания нет в помине.

2. Иконки являются украшениями, а не значимым контентом. В разметке они лишние. Такие штуки делают псевдоэлементами.

В разметке: список из 8 пунктов.
В каждом из которых заголовок и p.
Дальше гридом 2х2.
Псевдоэлемент располагается в первом столбце и двух рядах.

Как поместить текст на уровне геометрической фигуры?

html код почему то не дает выгрузить на сайт :(

Имеет смысл прочитать правила и обратить внимание на то, что в окошке редактора вопроса есть разные кнопочки, в том числе для вставки картинок и кода.

И будет хорошо, если приложите код в песочнице codepen.io, так его удобнее и смотреть и править.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Как вообще можно сделать логотип по центру

Прибить в центр гридами или абсолютами.

и в мобильной версии меню скрытым ?

Тут совсем не понятно, что у вас не получилось. Обычный display: none.

Как починить чекбоксы и правильно их расположить относительно текста?

Антон Антон, угу, только зачем дивы в лейбл-то пихать? Новичок же не поймет, что это вы конструкцию показывали и скопирует прямо невалидный код и будет пользоваться.

Вот этого вполне достаточно:
li>(input + label + p)

В крайнем случае ещё span внутри label на случай непредвиденных br.