Bootstrap 3 NavBar Move Link Underline Up

Я построил стандартный фиксированный верхний навигатор с высотой линии 150 пикселей для рабочего стола на рабочем столе. Кроме того, я разработал ссылки, чтобы иметь красную подчеркивание при наведении, но подчеркивание находится внизу навигационной панели, а не под текстом.Bootstrap 3 NavBar Move Link Underline Up

Получаю, что это из-за высоты линии, но мне интересно, как переместить ее обратно чуть ниже слов.

Ссылка на скрипку: JSFiddle link

Вот CSS:

.navbar-brand, 
.navbar-nav li a { 
    line-height: 150px; 
    height: 150px; 
    padding-top: 0; 
    background-color:#FFFFFF; 
} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { border-bottom:3px solid #9e1e22; }

HTML-:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
     <a class="navbar-brand" href="index.html">Brand</a></div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="topFixedNavbar1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">About</a></li> 
      <li><a href="#">News</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Assessments</a></li> 
      <li><a href="#">Improvements</a></li> 
      <li><a href="#">Incident Response</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 

     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
    </nav>

источник

2015-08-10 kylebellamy

Почему вы используете для этого высоту линии. Было бы лучше использовать прописку, чтобы выполнить то, что вы ищете здесь? Это или другое свойство может быть более подходящим для эффекта, которым вы пользуетесь, и решить эту проблему подчеркивания. – AgapwIesu

@kylebellamy Есть ли шанс, что вы также можете загрузить скриншот, так как я не думаю, что ваша скрипка работает – murday1983

Я за любое решение, чтобы сделать эту работу лучше. Как я могу это сделать? – kylebellamy

Это то, что вы имеете в виду? Держите NAV на 150, но наведите курсор прямо под ссылку.

@media (min-width: 768px) { 
 
    .navbar-default .navbar-brand, 
 
    .navbar-default .navbar-nav li a { 
 
    background-color: #FFFFFF; 
 
    } 
 
    .navbar-default .navbar-nav > li > a:hover, 
 
    .navbar-default .navbar-nav > li > a:focus { 
 
    border-bottom: 3px solid #9e1e22; 
 
    } 
 
    .navbar.navbar-default { 
 
    height: 150px; 
 
    padding-top: 45px; 
 
    } 
 
} 
 
.navbar.navbar-default { 
 
    background-color: #FFFFFF; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    border-bottom: 3px solid #9e1e22; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
 

 
     </button> <a class="navbar-brand" href="index.html">Brand</a> 
 

 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="topFixedNavbar1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">About</a> 
 

 
     </li> 
 
     <li><a href="#">News</a> 
 

 
     </li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Assessments</a> 
 

 
     </li> 
 
     <li><a href="#">Improvements</a> 
 

 
     </li> 
 
     <li><a href="#">Incident Response</a> 
 

 
     </li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

источник

2015-08-10 14:06:45 vanburen

А я вижу, где я ошибся! Сочетание высоты линии со ссылкой, а не ее использование на самом ящике. Обязательно проверьте это, когда я вернусь к своему столу, но я думаю, что вы это сделали. – kylebellamy

Должно быть, тогда вы можете настроить свои медиа-запросы на все, что вам нужно, – vanburen

Это сделало это, спасибо! – kylebellamy

Я знаю, что его не совсем то, что вы после, но вместо того, что подчеркивает пункт меню, вы не думали, просто изменяя цвет опции меню, а не когда завис над.

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus 
{ 
    color: #9e1e22; 
}

источник

2015-08-10 14:20:03 murday1983

Bootstrap 3 NavBar Move Link Underline Up

ответ

Смежные вопросы