CODEWITHSUNDEEP
twitter-bootstrapposition
TTC1
TTC1

Reputation: 71

Twitter Bootstrap trigger of collapse element scrolls up under fixed navbar

I have the classic fixed navbar menu at top of the page. (taken straight from the basic exemple at the Bootstrap exemples page) I want to have one of the menu choices to, once clicked, show a collapse element, thus making the page move down to make place for this element.

It is kinda working right now but it has a stange behavior. Whenever I click on the menu choice, the collapse element does show, sliding down the rest of the page, but it somehow places itself at the top of the screen, behind the navbar. I can't figure out how to make it slide down from the bottom of the navbar. It is hard to explain so here's the link to the page, and click on CONTACT to see what it does. Pay attention to the scrollbar, it seems like the element is at the proper location but it forces a scroll up so the top of the element is at the top of the screen, under the navbar.

Here's part of the HTML code I'm using:

this one for the collapse element that need to be shown:

<div class="wrapper">
    <div class="row-fluid centerSpan ">
        <form id="contact" class="form-horizontal collapse">
            <fieldset>

This one is the call of the collapse (the last <li>):

<ul class="nav">
    <li class="active"><a href="#">Acceuil</a></li>
    <li><a href="#about">CV</a></li>
    <li data-toggle="collapse" data-target="#contact"><a href="#contact">Contact</a></li>
</ul>

Upvotes: 2

Views: 1632

Answers (1)

omma2289
omma2289

Reputation: 54639

I don't know why the collapse is behaving like that, but I just made a simple handler to show the form using slideToggle(), I tested it on your site and worked well

$('.nav [data-toggle="collapse"]').click(function(e){
    e.preventDefault();
    $(this).data('target').slideToggle();
});

Upvotes: 1

Related Questions