How to get Bootstrap 3 to push down page content on dropdown click

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.

I have looked on stackoverflow, and all of the questions I can find so far are asking how to overlay content and not push it down. I would like to do the inverse (I think this must have changed with Bootstrap 3).

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:

(open this link and shrink your browser window, then click the three lines in the top right).

How can I add that functionality to dropdown items when the menu is not collapsed?

Thank you!


Here is the jQuery I added to solve the solution based on @hsb1007′s response:

$('.class-name-1').on('', function () {
     $('.leaderboard').css('margin-top', 450);       
$('.class-name-2').on('', function () {
     $('.leaderboard').css('margin-top', 200);       
$('.dropdown').on('', function () {
     $('.leaderboard').css('margin-top', 0);         

1 Solution

Without knowing your site structure, it’s hard to explain

From top of my head right now, you will have to put ‘margin/padding’ to your content bar to be pushed down.

Because other wise your menu will get wonky when dropdown menu appears.

Use their event based api. see below

$('#myDropdown').on('', function () {
     // this part will be trigged when dropdown is called

     // add margin / padding to your adsense container

To get the dynamic height,

$('#myDropdown').on('', function () {
     // this part will be trigged after dropdown is shown

     // Grab height of dropdown
     var height = $('.dropdown').outerHeight();

And again, I haven’t actually tried any of the codes above, but it should work. =)