Sridhar Katakam

Genesis and WordPress Tutorials

Moving Primary Navigation from below tagline to below header in Minimum Pro

by 24 Comments

In Minimum Pro, when a menu is assigned to Primary Navigation Menu theme location it will appear below the tagline like this:

primary-nav-minimum-pro-before

If you would like to move the navigation below the header follow along.

primary-nav-minimum-pro-after

In functions.php comment out or delete

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

Already a member? Log in below or here.

  • Aha. I saw someone in SP forum asked this question but couldn’t find the time to dig the code. Hopefully that person will find this article.

    Reply

  • Hey Sridhar,

    Do you have a tutorial like this for the Agency Pro theme? Basically I would like the primary navigation menu to be at the very top aligned to the left. And a logo image to be below this aligned to the right. So I figured this could be achieved by moving the primary navigation menu above the header, and using the header image in the header as the logo….Do you have any advice of how to do this? Thanks.

    Reply

  • Hi Sridhar! I am trying to do this in Centric Pro and having a heck of a time. Any thoughts? I would be thrilled if you had an answer. The site is http://bliss.andreaboring.com. As you can see, I have used one of your other tutorials, adding the parallax effect for the background image. Not sure if that makes a difference… THANK YOU!

    Reply

    • Try adding the following in Centric Pro’s functions.php:

      //* Reposition the primary navigation menu
      remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
      add_action( ‘genesis_after_header’, ‘genesis_do_nav’, 1 );

      Reply

      • Nada. Nothing. I am thinking it is because I used the parallax effect for the background image? I even tried to move the margin in CSS but that didn’t work either. Any other ideas my dear?

        Reply

      • There is this function for home-widget-1

        function centric_home_featured_widget() {

        genesis_widget_area( ‘home-widgets-1’, array(
        ‘before’ => ”,
        ‘after’ => ”,
        ) );

        }

        Perhaps something similar for the primary nav? I just have no clue how to do it and you are the first person I always turn to in time of need 😉

        Reply

          • Fixed.

            The problem was

            1) single quotes in the code you pasted became fancy ones

            2) presence of caching plugin and its folders in wp-content.

            Always keep caching plugins inactive when making these kind of changes to the site.

            Personally I don’t use any at all.

          • THANK YOU! You were probably cringing at my code. Everybody has to learn, right 🙂 Thanks for the tip on the caching plugins. I was having problems with changes not showing immediately on the sites if I didn’t use it, which was becoming annoying.

            You are the best!

  • This is a test site I’m working on. I moved the primary nav and set it to ‘fixed’ so it wouldn’t scroll. But now the responsiveness is ‘off.’ Can you tell me what I need to do to get the placement I want …plus the responsive behavior?

    Reply

  • Sridhar, I actually tried your solution after fiddling with adding a custom menu in the ‘Header Right’ widget area. I’ve placed it there again for your review. It may be easier for me to get this one responsive for smaller sized devices. Any suggestions?

    Reply

  • Your edits have been very helpful as we customize a Minimum Pro theme.

    Questions:

    – How can we fix the position of the primary navigation bar once we’ve positioned it below the header and above the main image?

    – How can we change the background color of the primary nav bar to white and the the font of the menu items to gray (leaving hover color blue)?

    – Can we reduce the home page static image size, so that it does not push all our text “below the fold”, but still keep it mobile-friendly?

    Thanks!

    Reply

  • Hi,

    I enjoy your posts! Thank you for sharing! I am knew to WP and am having a hard time getting the hang of it.

    I used your post about a responsive slider in Minimum to add that. I am now using this post to place the primary nav below that slider. I am confused by your CSS instructions. I have the following code in CSS even after the responsive slider mod:

    .minimum .site-tagline {
    margin-top: 600px;
    }

    This is what your instructions indicate it should be:

    .minimum .site-tagline {
    margin-top: 0;
    }

    I reviewed your slider post again to see if I was missing something, but what I found was:

    .home .site-tagline {
    margin-top: 0;
    }

    Am I missing something?

    Thanks!

    Reply

  • Hi Sri,

    How would you implement the primary menu move in a plugin?

    I have tried the following, but it doesn’t remove the primary menu in the original position after the header:

    function my_remove_primary_menu(){
    remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
    }

    add_action(genesis_after_header,’my_remove_primary_menu’);

    add_action( ‘genesis_after_header’, ‘genesis_do_nav’ );

    Reply
    • >