Сузить блок меню как на скрине (есть код)

[DarkEinstein]

Здравствуйте. Подскажите пожалуйста, правильный код чтобы можно было поместить меню в блок как на правом синем сайте что на скрине. А то у меня оно очень разползается и совсем не красиво сейчас...

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

 

Змінено 3 липня 2019 користувачем DarkEinstein

[Vetroff]

.sf-menu {
    display: flex;
}

 

[DarkEinstein]

34 минуты назад, Vetroff сказал:

.sf-menu {
    display: flex;
}

 

Класс. Плюсую)

Вот только текст как то близко друг к другу и нижняя строка липнет в лево.

А вот когда сжимаю страницу (под планшет наверное) То меню становится очень красивым. И текст сам красивый, но это ладно и не липнет друг к другу и по средине нижняя строка...)

[Vetroff]

Ну, я только направление указал 

Можно например еще дописать туда же 

align-items: center;
text-align: center;
line-height: 1.5;
text-transform: none;

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

[DarkEinstein]

6 минут назад, Vetroff сказал:

Ну, я только направление указал 

Можно например еще дописать туда же 

align-items: center;
text-align: center;
line-height: 1.5;
text-transform: none;

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

Нет, накладок не должно быть. Очень круто получилось. А при сжатии экрана до 770рх меню автоматом прячется в отдельную вертикальную кнопку. 

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

Тут тему довели до конца, может кому ещё поможет)

[Vetroff]

align-items: center;  добавьте не к ссылке а к .sf-menu

text-transform: none; можно не писать если убрать там же text-transform: uppercase;

[DarkEinstein]

9 минут назад, Vetroff сказал:

align-items: center;  добавьте не к ссылке а к .sf-menu

Добавил. Ничего правда не поменялось, но если так нужно то окей)

text-transform: none; убрал

Змінено 3 липня 2019 користувачем DarkEinstein

[Vetroff]

5 минут назад, DarkEinstein сказал:

Добавил. Ничего правда не поменялось, но если так нужно то окей)

 

 

Ну как же не поменялось, Зоозавр теперь вертикально посредине )

 

4 минуты назад, DarkEinstein сказал:

text-transform: none; убрал

 

 

нужно вместе с text-transform: uppercase;

они переписывают друг друга.

[DarkEinstein]

12 минут назад, Vetroff сказал:

align-items: center;  добавьте не к ссылке а к .sf-menu

text-transform: none; можно не писать если убрать там же text-transform: uppercase;

Ой, нет. Лучше uppercase убрать. Так текст красивее получается

Змінено 3 липня 2019 користувачем DarkEinstein

[DarkEinstein]

В 03.07.2019 в 20:47, Vetroff сказал:

 

Ну как же не поменялось, Зоозавр теперь вертикально посредине )

 

 

нужно вместе с text-transform: uppercase;

они переписывают друг друга.

 

Привет) А не подскажешь, что за прикол, убрал я в конце Зоозавр, добавил в начале "Игрушки и игры" и всё меню опять стало как было. Тот код твой стоит в стилях я ничего не делал.

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

Змінено 6 липня 2019 користувачем DarkEinstein

[Vetroff]

18 минут назад, DarkEinstein сказал:

что за прикол, убрал я в конце Зоозавр, добавил в начале "Игрушки и игры" и всё меню опять стало как было. Тот код твой стоит в стилях я ничего не делал.

 

вроде все ок )

 

18 минут назад, DarkEinstein сказал:

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

 

если код правится в блокноте, то ничего удивительного.

Редактор нормальный нужен, хотя бы Notepad++

[DarkEinstein]

15 минут назад, Vetroff сказал:

 

вроде все ок )

 

всё ок, но меню не блоками)))

 

А нотепад++ у меня есть, просто он у всех пишет красиво, по цветному, показывает где ошибка в коде а где нет. А у меня он как блокнот, я его по этому и забросил

[Vetroff]

25 минут назад, DarkEinstein сказал:

всё ок, но меню не блоками)))

 

 

значит размера экрана хватает для того чтобы в одну строку влезало.