Фиксированное меню при прокрутке

252

19 февраля 2017, 08:37

Добрый день всем. Прошу помощи в довольно таки простом задании, но самостоятельно найти ответ не получается.

Я использую фиксированное меню jq, все отлично, все работает, но, мне нужно в меню по мимо текста использовать еще и картинки. По логике, я пытаюсь сделать так:

<li> <a href="#s1"><img src="img/menu1.png"> Программа</a> </li> <li> <a href="#s2"><img src="img/menu2.png"> Поиск</a> </li> <li> <a href="#s3"><img src="img/menu3.png"> Контакты</a> </li>

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

Почему так происходит? я ведь использую для <li> display: inline;

Буду рад любой помощи, спасибо!

Answer 1

попробуйте использовать float:left или display: inline-block;

Answer 2

Пример реализации фиксированного меню с иконками на jQuery

* {
  padding: 0;
  margin: 0;
}
p {
  margin-bottom: 1rem;
}
ul.menu {
  list-style: none;
  display: flex;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
ul.menu li {
  padding: 10px;
  text-align: center;
}
ul.menu img {
  display: block;
  margin: 0 auto 10px;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.content {
  padding: 1rem;
}

Полный пример рабочего кода смотри тут: https://codepen.io/lukas-pierce/pen/qRGNWW