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/
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/
What I got after an hour of trial :
var alterClass = function() {
var ww = document.body.clientWidth;
if (ww <= 600) {
$('li.nav-item a').removeClass('nav-link');
$('li.nav-item a').addClass('btn btn-primary');
console.log('nav-link removed')
} else if (ww >= 601) {
$('li.nav-item a').removeClass('btn btn-primary');
console.log('btn-primary added');
};
};
$(window).resize(function() {
alterClass();
});
//Fire it when the page first loads:
alterClass();
Fiddle : https://jsfiddle.net/r4vohqym/