Проблема с настройкой меню bootstrap'а

#html #css #bootstrap

Здравствуйте. Подскажите пожалуйста такую вещь. Я создал меню через bootstrap, прописал
стили. Но когда я начал уменьшать размер меню, то он стал "съедать буквы". Нужно как-то
поднять их. Спасибо.



.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;
}




 
 






  

    

      

        
          
        
      
    
    

      

        E-mail:
        

          Телефон:
        
      
    
  
  

    

      
    
    

      

        

          Главная
        
        

          Демо-доступ
        
        

          Каталог
        
        

          Контакты
        
      
    
  






    

Ответы

Ответ 1

Высота навбара в бутстрапе влияет не только на .navbar { height: xxx; }, но и на
свойства других компонентов, например отступов у ссылок .navbar .nav > li > a { padding:
xxx; }.

Исходники бутстрапа написаны в LESS (SASS в четвертой версии), оба препроцессора
позволяют использовать переменные для кастомизации стилей. На высоту навбара влияет
переменная $navbar-height.

Так как вы не используете LESS/SASS-версию бутстрапа, возможности повлиять на высоту
навбара у вас две:


Перейти на http://getbootstrap.com/customize/, поменять значение @navbar-height и
собрать себе уникальный css-файл, и подключить уже его, вместо https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
Открыть исходники бутсрапа и найти все места, где фигурирует переменная $navbar-height,
пересчитать значения свойств во всех этих местах и разместить стили у себя, они применятся
поверх стандартных бутстраповских


Ответ 2

.navbar-nav>li>a {
  color: white;
}


Добавьте сюда padding-top: 3px; (чтобы сохранить небольшой отступ сверху)
Также по необходимости можно добавить: font-size: 12px;
(Возможно больше, возможно меньше, необходимо отталкиваться от размера шрифта в зависимости
от Ваших нужд, насколько нужно уменьшить меню)
То есть в итоге у вас должно получиться примерно так:

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