Having trouble keeping Drop Down Menu Centered when resizing browser

Question

So, I'm having trouble with when I am running my page and resizing the browser / on mobile the drop down menu becomes uncentered and runs off the page. I think I have to fix my padding levels but I am not sure where and when I have, it has messed up more than what I was fixing.

Any help, helps!

[

 $('.drop-down').click(function() { $(this).hide(); }); $('.nav-main li').click(function() { $('.drop-down').hide(); }); //drop down slide down $('.nav-main li ul').hide().removeClass('.drop-down'); $('.nav-main li').hover( function openDrop() { $('ul', this).stop().slideDown(900); }, function closeDrop() { $('ul', this).stop().slideUp(1000); }); 

 .nav-main { position: absolute; top: 0; height: 65px; width: 100%; text-align: center; } .nav-main ul { position: relative; margin: 0 auto; padding: 0; list-style: none; font-size: 22px; line-height: 100%; font-family: 'Futura W01 Bold', sans-serif; text-align: center; text-transform: uppercase; display: inline-block; width: 100%; } .nav-top { position: relative; margin: 0; padding: 0 66px 0 50px; float: none; display: inline-block; list-style: none; } .nav-top:first-child { padding-left: 0; } .nav-top:last-child { background-image: none; padding-right: 0; } .nav-top:last-child:after { content: none; } .nav-top > a { position: relative; display: block; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top a:hover, .nav-top.active > a { color: #454545; border-bottom: 4px solid #00e9d9; text-decoration: none; } .nav-top ul { display: none; position: absolute; left: -8.75px; width: 105%; top: calc(100% - 1px); border-bottom-left-radius: .3em; border-bottom-right-radius: .3em; } .nav-top:hover ul { position: absolute; top: calc(100% - 1px); left: -8.75px; width: 105%; } .nav-top li { float: center; background-color: #e9e9e9; padding-top: 16px; padding-bottom: 10px; text-align: inherit; } .nav-top li:last-child { padding-bottom: 16px; border-bottom-left-radius: .3em; border-bottom-right-radius: .3em; } .nav-top li > a { position: relative; display: inline; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 1px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top:after { display: block; position: absolute; left: 100%; top: -17px; width: 22px; z-index: 1; transform: translateX(-50%); height: 100%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav-main" role="navigation"> <ul> <li class="nav-top"><a href="#welcome">Welcome</a></li> <li class="nav-top"><a href="#about">About</a> <ul class="drop-down"> <li class="nav-drop"><a href="#about">Services</a></li> <li class="nav-drop"><a href="#client">Clients</a></li> <li class="nav-drop"><a href="#press">Press</a></li> <li class="nav-drop"><a href="#leadership">Leadership</a></li> <li class="nav-drop"><a href="#twitter">Follow Us</a></li> </ul> </li> <li class="nav-top"><a href="#contact">Contact</a></li> </ul> <span class="nav-arrow"></span> </nav> 

] 3

Answer 1

You can a @media breakpoint to target a certain browser width in order to reduce the font-size for the menu for the now smaller screen size.

@media only screen and (max-width: 767px) {
  .nav-main ul {
    font-size: 18px;
  }
}

See this fiddle (reduce the frame window width to see the changes)

Of course the font-size and browser window threshold width are up to you and your needs. And you may want to change more the the font-size... like paddings for example.

Answer 2

通过使用媒体查询，您可以解决此问题，媒体查询意味着您将根据设备屏幕尺寸定义CSS，您可以从中了解有关媒体查询的更多信息。

Answer 3

While the other answers are correct in using a @media breakpoint I would also suggest using 'rem' units for sizes as opposed to "px". Working in relative units has several advantages