How to change bootstrap navigation bar colors?

Question

I want to change my navigation bar background color,font color and color on hover. How can I do this?My customized CSS not working.

Here is my code:

<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-color: #00578d; "> 
                    <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>

I want to change my navigation bar background color,font color and color on hover. How can I do this?My customized CSS not working. I want to change my navigation bar background color,font color and color on hover. How can I do this?My customized CSS not working.

score 0 · Answer 1 · answered Sep 04 '17 at 14:20

0

One approach would be to download the bootstrap file if you are using a cdn link and install it in your app directory wherever you would put assets. Then you can find what you are looking for in the bootstrap file and alter it there (you can use a text editor like sublime to find the file and line). Disclaimer do not reuse the same altered file for other projects.

answered Sep 04 '17 at 14:20

Jermaine Subia

776
1
7
31

should I include all the files from CSS folder and JS folder ? What is the right way to include them in my home page? – Pioneer2017 Sep 04 '17 at 15:36
Yes you would just write it out like you have above for style.css just make sure you put it's correct file directory. – Jermaine Subia Sep 04 '17 at 15:56
I put it in my project and included the files like in my CDN , but It completely disrupted the whole design – Pioneer2017 Sep 04 '17 at 16:28
Did you download the right file? It has to be the same bootstrap version. Also how are you linking your page to the bootstrap file? – Jermaine Subia Sep 04 '17 at 16:55
Update your question to show what you have now... – Jermaine Subia Sep 04 '17 at 16:56

score 0 · Answer 2 · answered Sep 04 '17 at 14:21

0

Although not usually recommended you can try and use:

background-color: #00578d !important;

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document

answered Sep 04 '17 at 14:21

davedeecoder

225
4
14

Yes, I also tried the !important rule myself.Its only works if I do background:color: #00578d !important; but its doesn't work on changing my link color or my hover color. How can I change them? – Pioneer2017 Sep 04 '17 at 14:31
You could always give the html an Id as well as a class. Then in the CSS you can do #id-for-nav:hover { #00578d } – davedeecoder Sep 04 '17 at 14:33
I did.It's stays the same,it's not responding to my changes. – Pioneer2017 Sep 04 '17 at 14:39

How to change bootstrap navigation bar colors?

2 Answers2