Ad banner disables floating header

  • I use a Google adsense banner in the header on my site. An example of this can be seen on futbolpulse.com (not my site, credit danielwp).

    Similarly to the example, when I insert the adsense script in my header, my logo and top navigation bar do not remain on the screen when a user scrolls toward the bottom.

    I’d like to know how to keep both the adsense and the navigation menu static on the page while the user scrolls through the site.

    For future reference, I’d like to be able to scroll past the ad and keep only the menu static when the user scrolls.

    Thanks in advance!

Viewing 1 replies (of 1 total)

  • To keep the navigation bar fixed at the top is fairly easy, you just add some CSS to set the position property to fixed and the top property to 0 so it stays at the top of the window. You need to make sure, however, that the content underneath has the top margin set such that the content is displayed, because setting the navigation bar to fixed takes it “out of the document flow,” so the content which follows will flow up underneath it.

    If you want the menu to be fixed after scrolling a certain amount (in your case, the height of the ad), then you’ll have to add some JavaScript/jQuery. There’s a good tutorial here on how you can implement this using JavaScript & CSS. You don’t have to worry about including the jQuery library since WordPress already does that. If the theme that you’re using doesn’t have an option to add JavaScript, you can do it with a plugin like Header and Footer.

Viewing 1 replies (of 1 total)
  • The topic ‘Ad banner disables floating header’ is closed to new replies.