CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Asm Arman
Asm Arman

Reputation: 379

Bootstrap navbar dropdown menu positioning

I am designing a website.In my site I want to create such a menu where navbar will contain such a ul which class will be nav navbar-nav navbar-right.After shrinking the page size,when the dropdown button will appear.Then if the user click the button,in the appeared dropdown menu the li item should be float left,that means ul class will be nav navbar-nav navbar-left.How can I do this?I tried jquery.But in that case,the ul is not returning to its original nav navbar-nav navbar-right class after the page is returning to its original size.Here is an example of a website-

http://preview.themeforest.net/item/riana-charity-html-template/full_screen_preview/12694958

<header class="header">

      <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


      <ul class="nav navbar-nav navbar-right"> <!--This ul class should be changed,when the dropdown button is clicked. -->
        <li><a href="#">Link</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

      </header>

Using the Jquery

$('.navbar-toggle').click(function(){
$('#dropdown').removeClass('nav navbar-nav navbar-right');      
$('#dropdown').addClass('nav navbar-nav navbar-left');  
});

Upvotes: 0

Views: 627

Answers (1)

Omprakash Arumugam
Omprakash Arumugam

Reputation: 1044

You have to add navbar-right class and remove navbar-left class on window resize

$(window).resize(function(){
    if($(window).width () > 767) { // media query break point
       $('#dropdown').removeClass('navbar-left');      
       $('#dropdown').addClass('navbar-right');  
    } 
});

You can also achieve this only with CSS

Upvotes: 0

Related Questions