Bootstrap - Change direction of the navbar

O

6

21

I've using Twitter bootstrap and trying to align the navbars' text to the right, i.e - that the "brand" will appear on the right, and all else to the left of it. (For right-to-left website).

Any ideas how this can be accomplished?

Osmen answered 24/12, 2012 at 13:3 Comment(0)

M

13

Apply float:right to div with class as navbar-inner

<div class="navbar-inner" style="float:right">

Like

<div class="navbar">
    <div class="navbar-inner">    
        <div style="float:right">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>

Live Demo

Moffat answered 24/12, 2012 at 13:12 Comment(2)

Just for future reference - After this edit, the order of the items should be reversed (such as the ".brand" should be the last in the div now) – Osmen 24/12, 2012 at 13:21

@roman: If you want to update the order just update the order in <li> accordingly. – Moffat 24/12, 2012 at 13:23

R

18

pull-right and pull-left are default bootstrap classes that can help you achieve that without having to write your own css. For example,

    <div class="navbar pull-right"></div> [equivalent to float:right]
    <div class="navbar pull-left"></div>  [equivalent to float:left]

Rogozen answered 26/12, 2012 at 6:57 Comment(1)

this is the correct answer when you want to design your navbar from right to left. specialy for RTL languages. – Errol 29/10, 2018 at 11:13

M

13

Apply float:right to div with class as navbar-inner

<div class="navbar-inner" style="float:right">

Like

<div class="navbar">
    <div class="navbar-inner">    
        <div style="float:right">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>

Live Demo

Moffat answered 24/12, 2012 at 13:12 Comment(2)

Just for future reference - After this edit, the order of the items should be reversed (such as the ".brand" should be the last in the div now) – Osmen 24/12, 2012 at 13:21

@roman: If you want to update the order just update the order in <li> accordingly. – Moffat 24/12, 2012 at 13:23

A

3

Update these classes in bootstrap.css file

.navbar .nav {
    display: block;
    float: right;
    left: 0;
    margin: 0 10px 0 0;
    position: relative;
}


.navbar .brand {
    color: #777777;
    display: block;
    float: right;
    font-size: 20px;
    font-weight: 200;
    margin-left: -20px;
    padding: 10px 20px;
    text-shadow: 0 1px 0 #FFFFFF;
}


.navbar .nav > li {
    float: right;
}

Alyworth answered 24/12, 2012 at 13:19 Comment(3)

Thanks! There is an easier solution above. – Osmen 24/12, 2012 at 13:22

@Reno: It will also affect all other components which uses this styles. – Moffat 24/12, 2012 at 13:22

it will effect all .navbar elements. it depends what you need. – Alyworth 24/12, 2012 at 13:25

R

1

The better solution is to change the value of dir in the body tag:

<body dir="rtl">
...
</body>

Rotman answered 9/11, 2017 at 7:27 Comment(1)

not wokring for navbar – Arielariela 11/7, 2023 at 8:45

A

0

only change that... float:right to float:left

.navbar-toggle {
  position: relative;
  float: left;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

Analogue answered 7/2, 2016 at 23:48 Comment(0)

L

-1

Apply float:right to ul with class as .navbar-nav

.navbar-nav{float:right;margin:0}.navbar-nav>li{float:right}

Lohner answered 11/7, 2017 at 14:8 Comment(0)

Recommended topics

Hot tags