16

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>
Improve this question
0

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Confirmed in jsfiddle: jsfiddle.net/sayLz41a
Modified jsfiddle jsfiddle.net/sayLz41a/1 (with black text on white navbar instead of white text on white navbar)
simplest, most illustrative answer I've ever seen. Thanks @DestinatioN
I have a similar request but where should I modify.... in Layout page?
@singhswat that depens on where your navbar is
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/

Improve this answer

4 Comments

This doesnt appear to be working.. links are still on the left :(
in fiddle it's working..
imgur.com/nCwNwGi on Chrome OSX Version 55.0.2883.95 (64-bit) links are left aligned in the fiddle link in your answer (jsfiddle.net/0ewenvcb/1)
Updated my code & fiddle
1

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.

Improve this answer

Comments

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.