Bootstrap Alpha 4 navbar on click not working

Question

I wrote the following navbar code using Bootstrap 4. 1. I cannot figure out why the 3-bar icon will not show on the right side 2. Why the onclick on the links will not fire properly. I have to click on the link and then anywhere else on the window for the link to become underlined. 3. I cannot align the menu item to the right

$('.nav-link').on('click', function () {
  $('.active').removeClass('active');
  $(this).addClass('active');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navigation-menu" aria-controls="navigation-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">WELCOME</a>
  <div class="navbar-collapse collapse" id="navigation-menu">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#section1">link1</a>
      <a class="nav-item nav-link" href="#section2">link2</a>
    </div>
  </div>
</nav>

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

You need to specify navbar-light or navbar-inverse for the toggler icon, and active links to appear..

<nav class="navbar navbar-light navbar-toggleable-md">

or

<nav class="navbar navbar-inverse navbar-toggleable-md">

http://www.codeply.com/go/HZBegMbGii

Also, ml-auto would be used to push the navbar-nav to the right

edited May 23 '17 at 11:46

Community

1
1

answered Apr 05 '17 at 15:17

Carol Skelly

351,302
90
710
624

But what if I want the toggler icon to be of different color? I dont want to use the color schemes of navbar-light or inverse. – coffeeak Apr 05 '17 at 15:23
It's easiest to replace it with an icon, because now a SVG image is used for toggler icon: http://stackoverflow.com/a/42587673/171456 – Carol Skelly Apr 05 '17 at 15:28
Here's a custom color example: http://www.codeply.com/go/1ZFF5CEXM5/custom-navbar-color – Carol Skelly Apr 05 '17 at 16:14

score 0 · Answer 2 · answered Apr 05 '17 at 15:17

"Glyphicons" have been removed from Bootstap 4.

Dropped the Glyphicons icon font. If you need icons, some options are: the upstream version of Glyphicons Octicons Font Awesome

Via: https://v4-alpha.getbootstrap.com/migration/#components

The fix is to manually include Glyphicons css file.

Bootstrap Alpha 4 navbar on click not working

2 Answers2