By
anvyd
Хочу сделать логотип межу пунктами меню как на изображении
http://storage9.static.itmages.ru/i/15/0830/h_1440960187_5020454_95be8f1766.jpg
Но не до конца понимаю как это все сделать грамотно.
У меня есть два варианта, как это реализовать.
<header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"><img src="" alt=""></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header><header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Либо сделать одним из пунктов ссылку и в нее вставить картинку, либо ссылке установить бэкграунд и туда вставить картинку логотипа?
Но, что меня больше интересует, как мне это провернуть с адаптивностью?
мне по идее надо как вырвать эту ссылку оттуда и поставить перед меню, а оттуда вообще убрать этот `li` с ссылкой на логотип, подскажите как это делаю вообще?
на маленький устройствах я бы хотел, чтобы была такая верстка
<header> <a href="" class="logo"><img src="" alt=""></a> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Или мне надо создать сразу эту ссылку и установить ей свойство "display: none?" и наоборот, но мне кажется это как то глупо