How to change nav-link to btn on window resize with jquery?

I want to transform nav bar links from nav-link into btn on window resize. When the windows size >=601 – the nav-item change. But the problem is when the width goes bigger than 600. The nav link is not toggle the nav-link class.

var alterClass = function() {
  var ww = document.body.clientWidth;
  if (ww <= 600) {
    $('li.nav-item a').removeClass('nav-link');
    console.log('nav-link removed')
  } else if (ww >= 601) {
    $('li.nav-item a').addClass('btn btn-primary');
    console.log('btn-primary added');
  };
};
$(window).resize(function() {
  alterClass();
});
//Fire it when the page first loads:
alterClass();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>


<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

I want the nav-item to transform between nav-link and btn on resize.

Please find the fiddle here : https://jsfiddle.net/m6r71gp0/

Answer

I don’t know what might be the problem at your end. May be you were adding and removing classes in wrong order. Check this out and let me know.

var alterClass = function() {
  var ww = document.body.clientWidth;
  if (ww <= 600) {
    $('li.nav-item a').removeClass('btn btn-primary');
    $('li.nav-item a').addClass('nav-link');
    console.log('turned into link style')
  } else if (ww >= 601) {
    $('li.nav-item a').removeClass('nav-link');
    $('li.nav-item a').addClass('btn btn-primary');
    console.log('turned into button style');
  }
};
$(window).resize(function() {
  alterClass();
});
//Fire it when the page first loads:
alterClass();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />


<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

JSFiddle: https://jsfiddle.net/dL4361x2/1/

Advertisement

Answer