Bootstrap navbar, как добавить линию с бордером?

Question

[coolfusion]

Здравствуйте, скажем, есть вот такой навбар , как его привести вот к такому виду, т.е добавить линию, как на рисунке?

Answer 1

[Юрий Лобанов]

Только картинку сделайте аккуратнее.
jsfiddle.net/iiil/W32vD/4

Comments

[coolfusion]

@iiil Спасибо!

Answer 2

[Krickt]

Найти вот такой селектор

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus

и добавить
border-bottom: 3px solid orange;

Comments

[Юрий Лобанов]

@shiza36 Вы на картинку посмотрите внимательно ) Там есть тонкая светлая линия - во-первых. Во-вторых, линия ниже должна быть зеленой под выбранным элементом.
Короче, Вы вариант свой на представленном примере добавьте в css и посмотрите, что получилось.

[coolfusion]

@shiza36 Я так уже делал =) Есть еще идеи ?

[Krickt]

@iiil а, увидел, не заметил. Ну, добавить через :after её не составит проблемы. :)

Answer 3

[Юрий Лобанов]

Линия уж больно тонкая. Я про светлую. Кроме того есть затемнение.
Светлая линия бордером у меня получается толще, здесь она выглядит просто как острое ребро.
Если закрывать сверху дивом и абсолютно его позиционировать относительно nav - то появляется слепая область для клика. В случае с выпадающим меню это вообще не приемлемо.
Получается, что единственных выход - это фоном делать. Фон картинкой или колдуйте с градиентами.
Я бы сделал полупрозрачной png (сверху тонкая линия светлая, и дальше затемнение) и накладывал бы картинку фоном на все элементы, что сверху. На зеленом даст темно-зеленый, на оранжевом - темно-оранжевый. Естественно позиция бэкграунда bottom, повторять по горизонтали.

Comments

[coolfusion]

@iiil Спасибо, Я не спец в css и Bootstrap. Попробую. Если вам не сложно сможете накидать пример ? =) Спасибо

[Юрий Лобанов]

позже, если будет время.