StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to get Bootstrap 3 to push down page content on dropdown click
text
Body
copied!<p>Google AdSense prohibits websites from covering up ads with any element - even an expanded dropdown menu - so I am looking for a way to tell Bootstrap to push down the content of the page when a dropdown menu is clicked, so the leaderboard is pushed down instead of covered up.</p> <p>I have looked on stackoverflow, and all of the questions I can find so far are asking how to overlay content and <em>not</em> push it down. I would like to do the inverse (I think this must have changed with Bootstrap 3).</p> <p>I know this is possible, because on the responsive version of a site the toggle on the top right pushes down the page content, exactly I would like the dropdown menus to do:</p> <p><a href="http://getbootstrap.com/examples/navbar/" rel="nofollow">http://getbootstrap.com/examples/navbar/</a></p> <p>(open this link and shrink your browser window, then click the three lines in the top right).</p> <p>How can I add that functionality to dropdown items when the menu is not collapsed?</p> <p>Thank you!</p> <hr> <p>EDIT: </p> <p>Here is the jQuery I added to solve the solution based on @hsb1007's response:</p> <pre><code>$('.class-name-1').on('show.bs.dropdown', function () { $('.leaderboard').css('margin-top', 450); }) $('.class-name-2').on('show.bs.dropdown', function () { $('.leaderboard').css('margin-top', 200); }) $('.dropdown').on('hide.bs.dropdown', function () { $('.leaderboard').css('margin-top', 0); }) </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload