* { padding: 0; margin: 0; box-sizing: border-box; font-family: Lato; } html { overflow-x: hidden; } p { color: #8c8f94; margin-bottom: 30px; } h2 { font-family: 'Varela Round'; } .header-bg { background-image: url(images/bg/header.png); height: 1000px; background-repeat: no-repeat; background-size: cover; background-position: 45% 50%; overflow: auto; position: relative; width: 100%; } .layout { width: 1170px; margin: 0 auto; } .burger-menu div { width: 20px; height: 2px; background-color: #1b1c1e; margin-top: 4px; } .logo { position: absolute; text-align: center; width: 100%; top: 0; text-transform: uppercase; color: black; } .logo a { color: black !important; } .logo span { font-weight: 900; } .top-menu { margin-top: 60px; position: relative; width: 1170px; } .top-menu .burger-menu { margin-top: 10px; } .top-menu a { text-decoration: none; color: #26272d; } .help { color: #8c8f94; } .top-menu span { margin-left: 40px; } .top-menu span:first-of-type { margin-left: 0; } .menu1 { position: absolute; top: 0; left: 50px; } .menu2 { position: absolute; top: 0; right: 0; margin-top: -10px; } 
 <div class="header-bg"> <div class="layout"> <div class="top-menu"> <div class="burger-menu"> <div class="burger-menu-top"></div> <div class="burger-menu-middle"></div> <div class="burger-menu-middle"></div> </div> <div class="menu1"> <span><a href="#">Tour</a></span> <span><a href="#">Features</a></span> <span><a href="#">Pricing</a></span> </div> <div class="logo"><a href="#"><span>New</span>Providence</a></div> <div class="menu2"> <span><a href="#"><span class="help">Help</span></a> </span> <span><a href="#">Contacts</a></span> <span><button><a href="#">Get App</a></button></span> </div> </div> </div> </div>

Burger menu is slightly higher than other items. Attempting to use margin does not produce results.

If you set position: absolute everything in the top-menu shifts. Why does the menu behave this way?

  • The question is very general, and the screen is very small. - Grulex
  • corrected ....... - Vlad467
  • one
    I wonder how it is done and not what others would have done to me) - Vlad467
  • 6
    @ Vlad467, done html + js + css + svg. The general question is the general answer. - user207618 pm
  • one
    @ Excessively grit, good, fit answer is not minus even in a bad question. - user207618

1 answer 1

Remove

 .top-menu .burger-menu { margin-top: 10px; }

And add to .burger-menu :

 position: absolute;

Yes, and to align .menu2 , you need to remove the margin-top: -10px; .

 * { padding: 0; margin: 0; box-sizing: border-box; font-family: Lato; } html { overflow-x: hidden; } p { color: #8c8f94; margin-bottom: 30px; } h2 { font-family: 'Varela Round'; } .header-bg { background-image: url(images/bg/header.png); height: 1000px; background-repeat: no-repeat; background-size: cover; background-position: 45% 50%; overflow: auto; position: relative; width: 100%; } .layout { width: 1170px; margin: 0 auto; } .burger-menu div { width: 20px; height: 2px; background-color: #1b1c1e; margin-top: 4px; } .logo { position: absolute; text-align: center; width: 100%; top: 0; text-transform: uppercase; color: black; } .logo a { color: black !important; } .logo span { font-weight: 900; } .top-menu { margin-top: 60px; position: relative; width: 1170px; } .top-menu a { text-decoration: none; color: #26272d; } .help { color: #8c8f94; } .top-menu span { margin-left: 40px; } .top-menu span:first-of-type { margin-left: 0; } .menu1 { position: absolute; top: 0; left: 50px; } .menu2 { position: absolute; top: 0; right: 0; } .burger-menu { position: absolute; } 
 <div class="header-bg"> <div class="layout"> <div class="top-menu"> <div class="burger-menu"> <div class="burger-menu-top"></div> <div class="burger-menu-middle"></div> <div class="burger-menu-middle"></div> </div> <div class="menu1"> <span><a href="#">Tour</a></span> <span><a href="#">Features</a></span> <span><a href="#">Pricing</a></span> </div> <div class="logo"><a href="#"><span>New</span>Providence</a></div> <div class="menu2"> <span><a href="#"><span class="help">Help</span></a></span> <span><a href="#">Contacts</a></span> <span><button><a href="#">Get App</a></button></span> </div> </div> </div> </div>