Hello. Please tell me such a thing. I created the menu through bootstrap , I registered styles. But when I began to reduce the size of the menu, it began to "eat the letters." Need to somehow raise them. Thank. enter image description here

 .navbar-collapse { background: linear-gradient(to top, #4c4e5a 0%, #2c2d33 100%); border-radius: 5px; } .navbar-nav>li>a { color: white; } .navbar-nav>li>a:hover { color: #FF6600; height: 36px } .navbar-nav>li { border-right: 1px solid gray; height: 100%; } .nav { height:30px; font-size: 18px; } 
 <!DOCTYPE HTML> <html lang="en-US"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> <title>Zont-SPB</title> <meta charset="UTF-8"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="logo"> <a href="index.html"> <img src="logo1.png" alt="" /> </a> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="contacts"> <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail: <p> <span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон: </p> </div> </div> </div> <div class="navbar "> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <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="navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="#">Главная</a> </li> <li> <a href="#">Демо-доступ</a> </li> <li> <a href="catalog.html">Каталог</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div> </body> </html>

    2 answers 2

    The height of the navbar in the bootstrap affects not only the .navbar { height: xxx; } .navbar { height: xxx; } , but also on the properties of other components, for example, indents for the links .navbar .nav > li > a { padding: xxx; } .navbar .nav > li > a { padding: xxx; } .

    The bootstrap sources are written in LESS (SASS in the fourth version), both preprocessors allow variables to be used to customize styles. The navbar variable is affected by the $navbar-height variable.

    Since you are not using the LESS / SASS version of the bootstrap, you have two possibilities to influence the height of the navbar:

    • Go to http://getbootstrap.com/customize/ , change the value of @navbar-height and collect a unique css file for yourself, and connect it already, instead of https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css

    • Open the source code of the bootstrap and find all the places where the $navbar-height variable appears, recalculate the property values ​​in all these places and place the styles in them, they will be applied over the standard bootstrap

    • both tips helped. ty - DaniiL337
     .navbar-nav>li>a { color: white; }

    Add padding-top: 3px; (to keep a small indent from above)
    Also, if necessary, you can add: font-size: 12px;
    (Maybe more, maybe less, you need to build on the font size depending on your needs, how much you need to reduce the menu)

    That is, in the end, you should have something like this:

     .navbar-nav>li>a { color: white; padding-top: 3px; font-size: 12px; }