Sridhar Katakam

Genesis and WordPress Tutorials

How to move Header Below Front Page 1 in Altitude Pro

by 3 Comments

In the members-only forum, a user asked:

How can I move the Menu on the Homepage only, from the top till after the first widget Front Page 1, like on this screenshot: https://goo.gl/iasuja

Something like the Cafe Pro Theme;-) just with the Altitude Pro.

In this tutorial I share the steps for repositioning Header having the site title and Primary Navigation menu from its default fixed position on Altitude Pro's front page to below Front Page 1 widget area. The header will become fixed after scrolling past it.

Screencast:

Screenshots:

Before scrolling down:

header-below-front-page-1-altitude-pro

After scrolling down:

header-below-front-page-1-altitude-pro2

Step 1

Create a file named say, inner.js to be used for all pages other than front page in Altitude Pro's js directory having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thank you Sridhar,
    I like it but, would it be possible to show the menu at the bottom, already on the first view, before start scrolling down, like on Cafe-Pro?
    Just make sure that the user see the menu:-)

    Best Regards,
    Jesper

    Reply

    • I have made the changes on my site now, it looks great;-) and the Menu are visible on the first view on my screens and iPad.

      Just one small problem, the sticky menu are not sticky on the first menu link: http://11.lindebjerg.de/#front-page-2 called “UNSERE LEISTUNG” ?

      I use this link also on the top picture, so you can just click the picture, too. If I scroll further down to #front-page-3, the menu are sticky.

      Reply

    • Hi Sridhar,

      I’m having the same issue but don’t see the fix. I have front-page-1 set with a max height of 600 pixels. But the menu is sticky based on window height. How do I make the window stick after scrolling the 600 pixels?

      Reply
    • >