How to make fixed-top bootstrap menu background sticky only to right or left?

Question

I want to make fixed top menu in bootstrap, which is sticky only to right in browser.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

                            <a href="#" title="website" rel="home" class="navbar-brand">Logo</a>

                        </div>

                        <div class="navbar-collapse collapse"><ul id="main-menu" class="nav navbar-nav"><li id="menu-item-421" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-421"><a href="#">History</a></li>
<li id="menu-item-410" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-408 current_page_item active menu-item-410 active "><a href="#">Offer</a></li>
<li id="menu-item-404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-404"><a href="#">About</a></li>
<li id="menu-item-28" class="homePage menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">HOME PAGE</a></li>
<li id="menu-item-21" class="info-contact menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#">Contact</a></li>
<li id="menu-item-23" class="info-help menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="#">Help</a></li>
<li id="menu-item-333" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-333"><a href="#">Order</a></li>
</ul></div>                 </div><!-- .col-md-12 -->
                </div><!-- row -->
            </div><!-- container -->
        </nav>

I did it with class .container-fluid on the navigation, but when I'm change window size, navigation looks bad. How I can do that navigation items will be in .container like a content, and navigation background will be sticky to te right ?

My menu looks the same code like this: http://codepen.io/anon/pen/raeXxo

Answer 1

I think you're looking for the navbar-right class, if I understand your question correctly. Edit your ul element to the following:

<ul id="main-menu" class="nav navbar-nav navbar-right">

The menu should now be fixed to the right side of the screen.

Answer 2

If I correctly understand and you want to create menu which background is sticky to the right side of browser edge and have left side sticky to the parent container you should add sibling to menu , set parent position to relative, new created should have position: absolute and after that if you set top: 0 and right: 0 - (width of li) and proper width in %, and height of the to the element it will cover all space between and right browser edge. I think it should resolve your problem. Good Luck :)