I'm new to Bootstrap and I'm following a Lynda.com tutorial about the navbar. Unfortunately even though I've done exactly what is in the tutorial, it's not working how it is in the example, and I can't work out what I've done wrong. As far as I'm aware, the navbar links should stack vertically only on md and under, but they seem to be stacking vertically on any size device.
The page is here www.andycharlton.co.uk
The specific code is
<div class="navmenu">
<nav class="navbar navbar-toggleable-sm">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">One</a>
<a class="nav-item nav-link" href="#">Two</a>
<a class="nav-item nav-link" href="#">Three</a>
<a class="nav-item nav-link" href="#">Four</a>
<a class="nav-item nav-link" href="#">Five</a>
<a class="nav-item nav-link" href="#">Six</a>
</div><!--navbar-nav-->
</nav><!--nav-->
</div><!--navmenu-->
Be grateful for any help! Thanks
Following CSS classes was changed in latest version of Bootstrap 4 including navbar-toggleable-sm:
.badge-default to .badge-dark
.bg-faded to .bg-light
.bg-inverse to .bg-dark
.card-block to .card-body
.card-outline-primary to .border-primary
.card-outline-secondary to .border-secondary
.card-outline-success to .border-success
.card-outline-info to .border-info
.card-outline-warning to .border-warning
.card-primary to .bg-primary
.card-success to .bg-success
.card-info to .bg-info
.card-warning to .bg-warning
.card-danger to .bg-danger
.hidden-xs-down to .d-none .d-sm-block
.hidden-sm-down to .d-none .d-md-block
.hidden-md-down to .d-none .d-lg-block
.hidden-lg-down to .d-none .d-xl-block
.hidden-xs-up to .d-none
.hidden-sm-up to .d-sm-none
.hidden-md-up to .d-md-none
.hidden-lg-up to .d-lg-none
.hidden-xl-up to .d-xl-none
.navbar-toggleable-sm to .navbar-expand-sm
.navbar-toggleable-md to .navbar-expand-md
.navbar-toggleable-lg to .navbar-expand-lg
.navbar-toggleable-xl to .navbar-expand-xl
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With