bootstrap 4 - navigation menu issue on mobile devices

Question

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.

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:

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/

Please narrow this and clarify. It may need to be separate questions. — Carol Skelly, Oct 03 '16 at 11:34
@ZimSystem point taken. Removed questions 2, 3 and 4. Now it's just one - the most important. — Alex, Oct 03 '16 at 16:14
yes and no :) I marked your answer as correct but there is no right aligning as was requested in my question.. But i managed to fix it differently. See my update on how exactly i did it. — Alex, Oct 06 '16 at 09:33

score 1 · Accepted Answer · edited May 23 '17 at 12:16

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

bootstrap 4 - navigation menu issue on mobile devices

1 Answers1