Bootstrap Nav bar Orientation from LTR to RTL my code attached

Question

I have logo on left side of navbar and menu button on right side I want to change navbar orientation such that logo come to the right side and button for menu on left side my code is,

<nav class="navbar navbar-inverse navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="./Styles/img/seha1.png">
    </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">abc</a></li>
   <li><a href="#">abc</a></li>
   <li><a href="#">abc</a></li>
   <li><a href="#">abc</a></li>
      </ul>
    </div>
  </div>
</nav>

I tried one thing to use style navbar pull right on the outer side of this nav tag. and on button navbar pull left it work but result in increase the width of the navbar

Hopes for your suggestions

thanks

Possible duplicate of [How to implement RTL bootstrap 4 navbar?](https://stackoverflow.com/questions/53935966/how-to-implement-rtl-bootstrap-4-navbar) — Shidersz, Dec 29 '18 at 16:38
@shidersz same code as above I just use "nav{ direction:rtl; }" but it is not effecting my nav :( — john derik, Dec 30 '18 at 08:21

score 0 · Answer 1 · answered Dec 31 '18 at 17:53

You was right, the solution mentioned in the next link do not work for Bootstrap 3:

How to implement RTL bootstrap 4 navbar?

However, I manage to solve your problem using a custom class named navbar-rtl that will customize the CSS style of the navbar for give it a RTL appearance. I hope this can help you:

@media(min-width:768px) {
    .navbar-rtl .navbar-header {
        float: right;
    }
}

.navbar-rtl .navbar-brand {
    float: right;
}

.navbar-rtl .navbar-toggle {
    float: left;
}

.navbar-rtl .navbar-nav {
    float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-inverse navbar-default navbar-rtl">
  <div class="container-fluid">
  
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        Navbar
      </a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
      </ul>
    </div>

  </div>
</nav>

Bootstrap Nav bar Orientation from LTR to RTL my code attached

1 Answers1