2013-03-16 4 views
0

Я использую CMS Joomla 3.0 с встроенным бутстрапом. Мне нравится использовать nav-collapse и изменять стиль, например изменить цвет текста, цвет фона и форму (закругленная рамка), это прекрасно работает. Только есть тень (я думаю), которую я не могу убрать или удалить. Я попробовал 'text-decoration: none;' в моем css но оно не работает.joomla 3.0 twitter bootstrap nav-collapse text decoration

Так что я хочу, чтобы один текст был белым, без дополнительного украшения.

Мой HTML:

<div class="row-fluid"> 
    <nav class="navbar topnav"> 
    <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </a> 
    <div class="nav-collapse collapse topbtn"> 
     <ul class="nav menu"> 
     <li class="item-435"><a href="/" >Home</a></li> 
     <li class="item-468"><a href="/contact" >Contact</a></li> 
     </ul> 
    </div> 
</nav> 
</div> 

Мой CSS:

.navbar { 
    background-color: #FFF; /* background color will be black for all browsers */ 
    background-image: none; 
    background-repeat: no-repeat; 
    filter: none; 
} 

.nav-collapse li{ 
    text-decoration: none; 
    color:#FFF; 
    min-width: 150px; 
    margin: 2px 4px 4px 0px; 
    text-align: center; 
    box-shadow: none !important; 
    -webkit-box-shadow: none !important; 
    -moz-box-shadow: none; 
} 

.navbar .topbtn a{ 
    text-decoration: none; 
    border-radius: 0px 10px 10px 0px/0px 20px 20px 0px; 
    -moz-border-radius: 0px 10px 10px 0px; /* Old Firefox */ 
    background-color: #006FB7; 
    padding: 2px 2px 8px 15px; 
    box-shadow: none !important; 
    -webkit-box-shadow: none !important; 
    -moz-box-shadow: none; 
} 

.navbar .topbtn .active > a, .navbar .topbtn .active > a:hover{ 
    text-decoration: none; 
    color:#FFF; 
    font-weight:bold; 
    background-color: #8EBD43; 
    box-shadow: none; 
    -webkit-box-shadow: none;; 
    -moz-box-shadow: none; 
} 

В IE8 тест выглядит нормально (закругленные углы не поддерживается), в Firefox & сафари текст не как я хотел бы

+0

Есть ли URL-адрес, который мы видим в действии? – Hanny

ответ

0

Загрузочный лоток по умолчанию действительно применяет текстовую тень и шрифт к (сворачиваемому) навигатору. Вы можете попробовать это в конце файла CSS, чтобы переопределить его:

.navbar .nav > li > a { 
    text-shadow: none; 
} 
.nav-collapse .nav > li > a, 
.nav-collapse .dropdown-menu a { 
    font-weight: normal; 
} 

Форматирование Navbar происходит от /media/jui/less/navbar.less и /media/jui/less/responsive-navbar.less, если вы хотите иметь более близкий взгляд на источник.

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