Twitter Bootstrap Question posted in

Bootstrap Navigation active state not working – Twitter bootstrap

Hello people need help my bootstrap navigations focus is not changing when i click on other links. Links changes but the focus stays on Home link.

I have seen many post with the same problem and tried all the possible solution. Still i am not able to understand why it is not working.

Below is the pen.

http://codepen.io/iamsakib/pen/wGmWEe?editors=1000

my head looks like this:

<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Welcome</title>
    <link href="css/resets.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

Please help me.

Thanks.

Tags:

2

Answers


  1. 0

    Anytime you have an issue, open inspect element. Go to console and you’ll see this error.

    Uncaught Error: Bootstrap's JavaScript requires jQuery

    You need to include the jQuery library for bootstrap JavaScript to work.

    Login or Signup to reply.
  2. 0

    As explained in the other answer, you need to set the active state.

    $('.nav>li').click(function(){
    $('.active').toggleClass("active");
    $(this).toggleClass("active");
})

    http://codeply.com/go/m69a3wUly3

    Your Codepen is failing for 2 reasons:

    1. jquery is included after bootstrap.js
    2. you don’t have any JS to set the active class in the navbar
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search