Good day to all.

A week I have been fighting with one question. I can not make the menu, here's how on stackoverflow, so that it is fixed, all elements are horizontally and vertically aligned. This is what the menu should look like.

As I understand it, there should be one common ul with a lot of nested li and dropdown menu,

And now I’ve already seen in YouTube how many different videos and each one does it differently (which is logical), but I don’t understand how to do it more correctly, from the side of future adaptation.

The main question is how to align me completely in the center of the block (height, weight) and how you can make contacts under each other (number and address) in a single ul or li so that they are in the center.

I would be very happy for your help colleagues.

  • see how it is implemented on other sites or frameworks, and do not torture yourself with video lessons - Vitaly Shebanits

2 answers 2

Something like this, then where something does not interfere with styling at appropriate resolutions, @media to help .. http://webref.ru also helps to figure out

look at the whole page

it goes without saying that I took the badges from font-awesome from the fan ... I did not look for the same

also on ru.stackoverflow.com the search field takes focus before the logo and the logo itself is made in SVG - there is no time to do exactly like on this site

https://jsfiddle.net/t5mxn9s1/28/ - here are my attempts

 * { margin: 0; padding: 0; } img { display: inline-block; vertical-align: middle; } .fixed { position: fixed; top: 0; left: 0; width: 100%; border-bottom: 2px solid orange; background: #fbfbfb; } .container { width: 1024px; margin: auto; display: flex; justify-content: space-between; align-items: center; font-size: 14px; height: 50px; } span, i, b { vertical-align: middle; margin: 2px; } b { display: inline-block; transform: translateY(-10px); font-weight: bold; font-size: 2em; color: orange; } @media (max-width:1024px) { .container { max-width: 800px; } } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="fixed"> <div class="container"> <span> <i class="fa fa-stack-overflow" aria-hidden="true"></i> stackoverflow </span> <nav> <a href="">issues</a> <a href="">tags</a> <a href="">participants</a> </nav> <div class="search"> <form action=""> <input type="search"> </form> </div> <div class="releated"> <span> <img src="http://placehold.it/30x30/c0c" alt=""><i>3000</i> </span> <span class="ratio"> <i><b>.</b> 1</i> <i><b>.</b> 11</i> <i><b>.</b> 46</i> </span> <span><i class="fa fa-grav" aria-hidden="true"></i></span> <span><i class="fa fa-envelope-open" aria-hidden="true"></i></span> <span><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i></span> <span><i class="fa fa-binoculars" aria-hidden="true"></i></span> <span><i class="fa fa-code" aria-hidden="true"></i></span> </div> </div> </div>

  • Thank you so much) - ANYWAYCODE

Here is my option. If you need to cross-browser.

 * { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { width: 1090px; margin: 0 auto; outline: 1px solid black; height: 100vh; display: table; } header { display: table; position: fixed; background-color: #fafafb; width: 100%; height: 1px; padding: 0 1rem; box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1); } .header { display: table-cell; } .logo { background: url('https://cdn.sstatic.net/Sites/ru/img/sprites.svg?v=f508971f422f'); height: 38px; width: 150px; margin-top: 2px; margin-left: 0; background-position: 0 -495px; display: table-cell; margin-right: 1.5rem; vertical-align: middle; } .menu { display: table-cell; vertical-align: middle; padding-left: 1.5rem; } .menu-item+.menu-item { margin-left: 1rem; } .menu-item { display: table-cell; padding: 1rem .5rem; } .menu-item:hover { background-color: #eff0f1; } a.menu-item { color: #535a60; text-decoration: none; } .search { display: table-cell; vertical-align: middle; padding-left: 1.5rem; position: relative; width: 300px; } input { padding: .5rem; border-width: 1px; border-color: #c8ccd0; border-radius: 3px; width: 100%; font-size: 14px; background-color: #FFF; box-shadow: none; color: #3b4045; } input:hover, input:active, input:visited { position: relative; border-color: rgba(0, 149, 255, 0.5); box-shadow: inset 0 1px 2px #e4e6e8, 0 0 2px rgba(0, 149, 255, 0.2); box-shadow: none; } 
 <div class="warapper"> <header> <div class="header"> <a href="/" class="logo"></a> <div class="menu"> <a href="/" class="menu-item">Вопросы</a> <a href="/" class="menu-item">Метки</a> <a href="/" class="menu-item">Участники</a> </div> <div class="search"> <input class="input-search" type="search" value="Поиск..."> </div> </div> </header> </div>

  • Thanks, now the main points are clear. - ANYWAYCODE
  • With mt 100px, the whole menu is moving down for me, although I’m setting the value to another section that is already under the menu, is it like that?) - ANYWAYCODE
  • What is mt? and how does the menu move out? show code sample - Sergey B