2013-03-16 85 views
0

我使用CMS Joomla 3.0與bootstrap集成。 我喜歡使用nav-collapse並修改樣式,如更改文本顏色,背景顏色和形狀(圓角邊框),這些工作正常。 只有一個影子(我認爲),我不能逃脫或刪除它。 我試過'text-decoration:none;'在我的CSS但它不起作用。joomla 3.0 twitter bootstrap nav-collapse文字裝飾

所以我想在白色的單個文本,沒有額外的裝飾。

我的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 & Safari中的文字是不是因爲我想

+0

有沒有一個URL,我們可以看到這在行動? – Hanny 2013-03-18 17:32:22

回答

0

默認情況下,引導程序的確將一些text-shadow和font-weight應用於(可摺疊)導航欄。如果你想有源頭細看

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

導航欄格式化來自/media/jui/less/navbar.less/media/jui/less/responsive-navbar.less:你可以在你的CSS文件的末尾嘗試這種覆蓋它。