#main-menu { border: none; } .main-head { background-color: #4D5B6B; font-family: Arial, sans-serif; font-size: 15px; } .block1 { line-height: 1.1; } .block2 { line-height: 1.1; } .block3 { line-height: 48px; } 
 <!DOCTYPE html> <html class="no-js" lang="ru"> <head> <meta charset="utf-8"> <title>Menu</title> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta property="og:image" content="path/to/image.jpg"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- JQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- Header CSS (First Sections of Website: paste after release from header.min.css here) --> </head> <body> <header class="main-head"> <div class="top-line"> <div class="container"> <div class="row"> <div class="col-xs-4 col-md-2 col-lg-2 block1"> <h1>Hello</h1> </div> <div class="col-xs-8 col-md-10 col-lg-3 col-lg-push-7 block2"> <div class="phone">+7 (495) 00-99-56</div> </div> <div class="col-xs-12 col-md-12 col-lg-7 col-lg-pull-3 block3"> <nav class="navbar navbar-default" style="background-color: #4D5B6B; border-color: transparent"> <div class="navbar-header"> <!-- Кнопка с полосочками, которая открывает меню на мобильных устройствах --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="main-menu"> <ul class="list-inline"> <li class="active"><a href="#">Главная</a></li> <li><a href="#">О компании</a></li> <li><a href="#">Оценка</a></li> <li><a href="#">Сделки M&amp;A</a></li> <li><a href="#">Бухгалтерские услуги</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </nav> </div> </div> </div> </div> </header> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>

It is necessary to remove the light strip when you expand the menu on small screens. Please help - I can not figure out the styles.

    1 answer 1

    After turning off the border, you still have the shadow left. Just add to #main-menu

      box-shadow: none; #main-menu { border: none; box-shadow: none; }
    • Thanks for the help! - Proshka