CODEWITHSUNDEEP
csstwitter-bootstrap
Ajay
Ajay

Reputation: 4251

How to place right side fixed navigation bar in Twitter bootstrap

I am trying to add 4 navigation buttons at right side. On Clicking which I would be able to navigate to respective divs in the same page.(just like a single page design).

I am adding following lines of codes to create 4 navigation buttons at right side of the page. 

    <div data-spy="affix" class="offset8 span1 well offset7 small">
        <ul class="nav nav-list">
            <a class=".move-1" data-target=".home-1-image"> A </a>
            <a class=".move-1" data-target=".home-2-image"> B </a>
            <a class=".move-1" data-target=".home-3-image"> C </a>
            <a class=".move-1" data-target=".home-4-image"> D </a>
        </ul>
  </div>

But those lines of codes are not placing my 4 buttons at extreme right. Check snapshot. enter image description here

Which bootstrap classes can be used to make it place at extreme right side and those should be fixed in position. (responsiveness should be well taken care of).

Upvotes: 3

Views: 21398

Answers (3)

user3342524
user3342524

Reputation: 11

HTML

<div data-spy="affix" class="offset8 span1 well offset7 small  nav">
        <ul class="nav nav-list">
            <a class=".move-1" data-target=".home-1-image"> A </a>
            <a class=".move-1" data-target=".home-2-image"> B </a>
            <a class=".move-1" data-target=".home-3-image"> C </a>
            <a class=".move-1" data-target=".home-4-image"> D </a>
        </ul>
</div>

CSS

.nav {

    position: fixed;
    float:right;
    margin-right: 0px;

   }

Upvotes: 0

Nav
Nav

Reputation: 20658

You actually need to use navbar-right, as I found out from here and used in my code:

        <div class="navbar-collapse collapse navbar-right" >
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->

Upvotes: 0

Sergio Wizenfeld
Sergio Wizenfeld

Reputation: 492

you can use .navbar-right and also add position: fixed; right: 0;. that should do the trick

Upvotes: 5

Related Questions