CODEWITHSUNDEEP
jquerybootstrap-4twitter-bootstrap-4
Alex
Alex

Reputation: 5227

bootstrap 4 - navigation menu issue on mobile devices

Trying to learn website layouts creation using the newest bootstrap 4 alpha 4 (in conjustion with jQuery 3) and in this question I would would like to cover 1 issue which I have come across so far.

  1. When I click on "menu" button in navbar "collapsed mode" - drop down list drops in the center and then shifts to the left side. This looks awful. Problem explained:

enter image description here

Why does this happen and how do I force the list to to always drop down from right side instead (and stay there after animation)?

Here is the fiddle: http://jsfiddle.net/Wy22s/1073/

Edit: in accepted solution there is no right align.. Note that in fiddle there is class pull-xs-right for navbar but it doesn't kick-in:

http://jsfiddle.net/Wy22s/1075/

So I went ahead and made my own solution by adding clearfix div before navbar:

    <a class="navbar-brand" href="#">Website</a>
  <div class="clearfix hidden-sm-up"></div>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar1">
        <!-- <a class="navbar-brand" href="#">Fixed bottom</a> -->
        <div class="nav navbar-nav pull-xs-right">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="#">About</a>
        </div>
    </div>

so in the end I am using this approach (no CSS changes required):

http://jsfiddle.net/Wy22s/1077/

Upvotes: 3

Views: 1373

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362410

This question has basically been answered here: Bootstrap 4 responsive navbar vertical

In Bootstrap 4, the navbar doesn't stack vertically by default so you have to add some CSS to make it work like Bootstrap 3.x..

@media(max-width:544px) {
    .navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar .navbar-nav {
        float:none !important;
    }
    .navbar .collapse.in, .navbar .collapsing  {
        clear:both;
    }
}

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

UPDATE: The extra CSS is no longer needed for Bootstrap 4 Alpha 6 since the navbar will stack vertically: http://www.codeply.com/go/cCZz5CsMcD

Upvotes: 1

Related Questions