Good day to all. I ask for help in a pretty simple task, but I cannot find the answer myself.

I use the fixed jq menu , everything is fine, everything works, but I need to use pictures in the menu along with the text. Logically, I'm trying to do this:

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

I use the usual <br> to make the text under the picture, everything would be fine, but the menu starts to go vertically. Those. Without menu pictures, the menu is horizontal, as soon as I start to write <br> after each picture - the menu becomes vertical.

Why it happens? I'm using for <li> display: inline;

I will be glad to any help, thanks!

    2 answers 2

    try using float: left or display: inline-block;

    • I completely forgot about display: inline-block. Thanks a lot! - OuFinx

    An example of the implementation of a fixed menu with icons on 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; }

    See the full working code example here: https://codepen.io/lukas-pierce/pen/qRGNWW