Bootstrap 4 -- Moving links to the right of the navbar with a toggle button

Question

I was attempting to move the links from the left of the navbar to the right side and it wouldn't let me. I've tried floating it to the right and nothing had happened, same with position:relative; right: 200px; and padding-right: -200px;. If anyone has any other suggestions it would be appreciated thank you.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>

    <a class="navbar-brand" href="index.html">

        <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt="">

    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">
                <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="services.html">Services</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="portfolio.html">Portfolio</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="about.html">About</a>
            </li>

        </ul>

    </div>
</nav>

score 32 · Accepted Answer · answered Jan 18 '17 at 05:46

32

You're using the .mr-auto so you have margin-right: auto !important and the nav-items left aligned.
If you change the class to .ml-auto you have margin-left: auto !important and your nav-items are right aligned

answered Jan 18 '17 at 05:46

julianstark999

3,450
1
27
41

Confirmed in jsfiddle: https://jsfiddle.net/sayLz41a/ – haxxxton Jan 18 '17 at 05:48
Modified jsfiddle https://jsfiddle.net/sayLz41a/1/ (with black text on white navbar instead of white text on white navbar) – julianstark999 Jan 18 '17 at 05:50
simplest, most illustrative answer I've ever seen. Thanks @DestinatioN – Tes3awy May 12 '17 at 21:40
I have a similar request but where should I modify.... in Layout page? – singhswat Jun 19 '19 at 09:23
@singhswat that depens on where your navbar is – julianstark999 Jun 19 '19 at 13:33

Mukesh Ram · Answer 2 · 2017-01-18T07:27:40.473

1

Modify some css in bootstrap:

Used justify-content: end; to start content for end

.mr-auto {
    margin-right: 0 !important;
}
.navbar-toggleable-md .navbar-collapse {         
    -webkit-justify-content: flex-end;
    justify-content: flex-end;  
}

Here is fiddle code: https://jsfiddle.net/0ewenvcb/2/

edited Jan 18 '17 at 07:27

answered Jan 18 '17 at 05:57

Mukesh Ram

6,248
4
19
37

This doesnt appear to be working.. links are still on the left :( – haxxxton Jan 18 '17 at 06:55
in fiddle it's working.. – Mukesh Ram Jan 18 '17 at 07:05
http://imgur.com/nCwNwGi on Chrome OSX Version 55.0.2883.95 (64-bit) links are left aligned in the fiddle link in your answer (https://jsfiddle.net/0ewenvcb/1/) – haxxxton Jan 18 '17 at 07:19
Updated my code & fiddle – Mukesh Ram Jan 18 '17 at 07:27

score 1 · Answer 3 · edited Jun 09 '18 at 05:26

After trying all options, the menu-icon (navbar-toggler-icon) was not moving to the right in Bootstrap 4.1.
I tried the following work around:
Under @media (max-width:575px) - added .navbar-header {width:100%;}, and under class .menu-icon (I named it menu-icon) {justify-content:end;}.
This moved both the navbar-brand and menu-icon to the right. To move the navbar-brand to the left, in the HTML added class mr-auto to navbar-brand. This worked just fine for me.

score 0 · Answer 4 · answered May 19 '18 at 21:10

0

If all above fails, I added 100% width to the navbar class in CSS. Until then mr-auto wasn't working for me on this project using Bootstrap 4.1.

answered May 19 '18 at 21:10

domdaviesdev

89
1
5

Bootstrap 4 -- Moving links to the right of the navbar with a toggle button

4 Answers4

Linked