CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Jeremy
Jeremy

Reputation: 925

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:

http://getbootstrap.com/examples/navbar/

(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!

EDIT:

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

$('.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);         
})

Upvotes: 3

Views: 6504

Answers (1)

hsb1007
hsb1007

Reputation: 119

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('show.bs.dropdown', function () {
     // this part will be trigged when dropdown is called

     // add margin / padding to your adsense container
})

To get the dynamic height, 

$('#myDropdown').on('shown.bs.dropdown', 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. =)

Upvotes: 3

Related Questions