dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Bootstrap navigation styling problem

  1. #1
    Join Date
    Mar 2004
    Location
    Oklahoma, USA
    Posts
    258

    Bootstrap navigation styling problem

    I have been working on this problem for days. I have the following code and styling and I can not get the "Active" state of a navigation link button styled, and I can not find the problem.

    The Home button should be the active button but it is the same color as all the other navigation buttons, and their is a light gray background on the button.

    What am I doing wrong?

    Code:
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">Kind Words</a></li>
                      <li><a href="#">Connect</a></li>
                      <li><a href="#">FAQ</a></li>
                    </ul>
                  </div><!-- /.navbar-collapse -->
    Code:
     .nav .navbar-nav li a:active  {
            color: #014f6e  !important;           
            background-color: #ff0000  !important;
        }
    Larry

  2. #2
    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    37
    Hi,

    I am try to solve your problem .
    I hope it will help to you.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
      <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active " href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">service</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">connect</a>
      </li>
    </ul>
        
      </div>
    </nav>
    
    
    </body>
    </html>
    Thanks.
    Krishna Agola

  3. #3
    Join Date
    Mar 2004
    Location
    Oklahoma, USA
    Posts
    258
    Thank your for your help. I will try this code.
    Unfortunately, I am having computer problems today.
    Larry

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles