如何更改自CDN的引導程序導航菜單顏色

我想改變我的鏈接顏色和我的懸停顏色的鏈接，但它不工作。我確實設法使用background: #00578d !important;更改背景顏色，但重要的規則不適用於鏈接和懸停。我的代碼：如何更改自CDN的引導程序導航菜單顏色

<head> 
    <meta charset="UTF-8"> 
    <title>@if (!empty($title)) 
     {{ $title }} 
     @else 
     MyHero 
     @endif</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/> 
    <link href="{{ asset('carousel.css') }}" rel="stylesheet"/>  
    <script>var BASE_URL = "{{ url('')}}/";</script> 


</head> 

<header> 
    <!-- NAVBAR 
================================================== --> 
    <body> 
     <div class="navbar-wrapper" > 
      <div class="container-fluid" > 

       <nav class="navbar navbar-inverse navbar-static-top" style="margin: 0;padding: 0;border:none;background: #00578d !important; "> 
        <div class="container-fluid" > 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
           <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="{{ url('/')}}" style='font-weight:bold;font-size:20px; height: 50px; margin-top: 10px; '>MyHero</a> 

         </div> 
         <div id="navbar" class="navbar-collapse collapse" style='font-weight:bold;font-size:20px;height: 50px; margin-top: 10px;' > 



          <ul class="nav navbar-nav"> 

           @if(!empty($menu)) 
           @foreach($menu as $item) 
           <li><a href="{{ url($item['url'])}}">{{ $item['link'] }}</a></li> 
           @endforeach 
           @endif 

           <li><a class="shopp" href="{{ url('shop')}} " >Shop</a></li> 

           <li> 
            <a href="{{ url('shop/checkout')}}"> 
             <img width="25" src="{{ asset('images/shopping-cart.png')}}" > 
             <div id="total-cart"> 
              @if(! Cart::isEmpty()) 
              {{Cart::getTotalQuantity()}} 
              @endif 


             </div> 

            </a> 
           </li> 
          </ul> 


          <ul class="nav navbar-nav navbar-right"> 
           @if(Session::has('user_id')) 
           <li><a href="{{ url('/')}}">{{ Session::get('user_name') }}</a></li> 
           @if(Session::has('is_admin')) 
           <li><a href="{{ url('cms/dashboard')}}">CMS DASHBOARD</a></li> 
           @endif 
           <li><a href="{{ url('user/logout')}}">Logout</a></li> 
           @else 
           <li><a href="{{ url('user/signin')}}">Sign In</a></li> 
           <li><a href="{{ url('user/signup')}}">Sign Up</a></li> 

           @endif 
          </ul> 
          <ul class="nav navbar-nav navbar-right"> 
         <li> 

          <form class="navbar-form" role="search" autocomplete="off"> 
         <div class="form-group" style="width: 240px;"> 
         <input type="search" id="searchbox" name="search" placeholder="Search products or categories..." class="form-control" style="min-width: 240px;"></input> 
         </div> 
         <div style="position: absolute;margin: 0 auto;padding: 5px; "> 
          <div class="search-info"></div> 
         </div> 
        </form> 


        </li> 
          </ul> 
         </div> 
       </nav> 
       @include ('inc.sm') 
       @include ('inc.errors') 
       @yield('carousel') <br><br> 
      </div> 
     </div> 




</header> <br><br><br><br>

來源

2017-09-04 Pioneer2017

你試過這個嗎？

a:link{ 
    text-decoration: none; 
    color:black; 
} 
a:visited{ 
    text-decoration: none; 
    color:black; 
} 
a:hover{ 
    text-decoration: none; 
    color:black; 
}

來源

2017-09-04 16:31:49 reevkandari

好吧，我太需要自定義默認引導的導航鏈接，原來，他們正在使用CSS specificity styling樣式。但是你也可以使用特異性的造型，以覆蓋默認的引導者，只記得包括CDN

後CSS樣式表用於覆蓋

.navbar{ 
    border-radius: 0; 
    border: 0; 
    background-color: #333; 
    background-image: none; 
} 
/*nav links*/ 

.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a{ 
    color: white; 
    font-weight:normal; 
    text-shadow: none; 
} 
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .active > a{ 
    background-color: #2dbe5f; 
    background-image: none; 
    box-shadow: none; 
} 
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .active > a:hover{ 
    background-color: #2da653 !important; 
    background-image: none; 
} 
/*nav dropdowns*/ 
.navbar-nav > li > .dropdown-menu{ 
    box-shadow: none; 
    padding:0; 
    border-top:0; 
} 
.dropdown-menu > li > a{ 
    padding: 10px 0 10px 10px; 
    font-size:15px; 
} 
.dropdown-menu > li > a:hover{ 
    background-color: #2dbe5f; 
    color: white; 
    background-image: none; 
}

自定義上面的代碼按您的需求。

來源

2017-09-04 19:15:04

如何更改自CDN的引導程序導航菜單顏色

回答

相關問題