2

I have a basic bootstrap navbar, that collapses. Now i want all of the items in the <ul> tag to be on the right side of the screen. When the menu is not collapsed. 

<nav class="navbar fixed-top navbar-toggleable-md navbar-custom">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main_navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">&#9776;</span>
    </button>
    <a class="navbar-brand" href="">
        navbar
    </a>

    <div class="collapse navbar-collapse" id="main_navbar">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

The only custom styling at the moment is color in the navbar-custom class. This does, as far as i know, not have an effect on the allignment.

I have tried to use pull-right, pull-lg-right, float-lg-right, justify-????-end on the <ul> tag.

Do anyone have any idea how you could achieve this?

jakobS
  • 87
  • 2
  • 10

3 Answers3

2

Solved

I had to use two list-tags, the first on with the mr-auto class. As described here

<div class="collapse navbar-collapse" id="main_navbar">
    <ul class="nav navbar-nav mr-auto"></ul> <!-- Add this one -->
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">home</a>
        </li>
    </ul>
</div>
Community
  • 1
  • 1
jakobS
  • 87
  • 2
  • 10
1

Since you are using bootstrap, add the class navbar-right to the ul

<ul class="nav navbar-nav navbar-right">
Krystian Borysewicz
  • 784
  • 10
  • 23
  • `navbar-right` does not exist in Bootstrap v4 which is what this question is about, so this will not work. – vanburen Jan 26 '17 at 00:02
0

Those pull classes use responsive sizing I believe. Have you tried using something like pull-xs-right?

<nav class="navbar fixed-top navbar-toggleable-md navbar-custom pull-xs-right">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main_navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">&#9776;</span>
</button>
<a class="navbar-brand" href="">
    navbar
</a>

<div class="collapse navbar-collapse" id="main_navbar">
    <ul class="nav navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Disabled</a>
        </li>
    </ul>
</div>

scotteeedog
  • 1
  • 1