How to reposition the Primary Navigation in Magazine Pro

The Magazine Pro theme is a very nice and versatile theme from Studiopress.

Studiopress is providing a wide array of very useful code snippets to change all sorts of things in their themes.

In the functions.php of the Magazine Pro theme the primary navigation is being repositioned with the following code:

//* Reposition the primary navigation menu 
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

In theory, it should be very easy to just swap out the hook in the add_action part to reposition the primary navigation in Magazine Pro anywhere I’d like to. (You can reference the Visual Hook Guide for possible locations.)

In practise, you will not see any change in the position of the primary navigation, no matter what hook you use.

As soon as you use an add_action to place the primary navigation it will just be right on top of the page.

So what is going on here????

We have to take a look at the style.css of Magazine Pro.

Around line 1402 of the style sheet we find the settings for the primary navigation:

.nav-primary {
    background-color: #222;
    color: #fff;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

There we have the culprit: position: fixed;

This makes sure the primary navigation stays on top of the screen all the time.

Either remove this declaration or change it to position: relative; (depends on the styling you want to achieve…)

And like magic, the primary navigation of the Magazine Pro theme can be positioned in any hook you want.

Let´s add it to the footer area.

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_footer', 'genesis_do_nav' );

And here is what it looks like: