Как сделать горизонтальное меню с логотипом по середине?

Question

[Mark]

Всем привет, помогите пожалуйста сделать горизонтальное меню с логотипом по середине.
Сделал, но когда экран уменьшаешь, то слева и справа стороны наезжают друг на дружку.
Корректно отображается только на больших экранах.
и слева и справа фон подложен с градиентом из края белый и переходит в середине в прозрачность.
https://jsfiddle.net/xzpnzb3j/5/

Comments

[Андрей Токмаков]

Начнем с того, что

           

что это за бред

[Mark]

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

[Александр Шилов]

Зачем вы усложняете себе жизнь? Есть же bootstrap.

[Mark]

Есть какой-нибудь пример подобной штуки?

[Александр Шилов]

Марк Чащин: Интернет перепихан подобными штуками, достаточно лишь применить немного усидчивости и настойчивости.

Answer 1

[Mary Солнечная]

У вас там разметка такая забавная. Скорее всего там все было под ваши задачи, но вам можно ее немного упростить:
1) родительский блок > блок-контейнер для флекса>дочерние блоки, которые вы будете флексить
Дочерние блоки - ссылки. Добавьте логотип ссылкой в меню
Вроде так:
Тыц

Comments

[Mark]

Блин, прям выручила, спасибо огромное!!!
Вопрос, там где левая и правая часть в коде у меня подложка была фона, из белого в прозрачность, не подскажешь как это лучше реализовать? Можно ли как-то в css это сделать, а то я изображение использовал, а оно не сжимается и что попало получается.

[Mary Солнечная]

а посмотреть можно макет? :)