• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

How to move the primary navigation menu?

Home › Community Forums › Aspire Theme Support › How to move the primary navigation menu?

Tagged: navigation menu

  • This topic has 10 replies, 2 voices, and was last updated 3 years ago by Wes.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 1, 2020 at 4:29 pm #23693
    SavvyPro
    Customer

    I have tried to move the menu by changing the code in the functions.php file from this:

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

    To this:

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

    Yet, when I do it, the new position will not display.

    Any ideas what I am doing wrong?

    Thanks

    January 2, 2020 at 12:40 am #23695
    Wes
    Moderator

    It looks like you did it right, the only issue is that the menu text is showing up behind the background image. So adding z-index to the Nav should fix it.

    Add this – z-index: 99; to the .nav-primary in your css. You can either edit the style.css directly (search for it in your css) or you can add it to your Custom CSS section in the Customiser page (recommended way) –

    .nav-primary {
        z-index: 99;
    }

    Once you add that it should show up in front of the background image. You’ll probably want to add in your CSS styles/adjustments to get it to appear however you want it to look.

    January 2, 2020 at 12:48 am #23696
    SavvyPro
    Customer

    Great! I will give that a shot.

    Thanks again, Wes.

    January 2, 2020 at 12:10 pm #23697
    SavvyPro
    Customer

    That worked at repositioning it, but now when I scroll down the parallax effect of the front-page-1 background makes it disappear from what it looks like.

    Is there a way to prevent the menu from disappearing now when it is in its new location at the genesis_before_header area?

    Thanks

    January 2, 2020 at 1:17 pm #23698
    SavvyPro
    Customer

    Okay, I got it to work using the following CSS:

    .nav-primary {
      position:fixed;
      background: #5271ff;
      top:0;
      right:0;
      left:0;
      z-index:99;
    }

    I then had to move the header down a bit so the menu was not overlapping with it using the following CSS:

    .site-header{
    	margin-top: 50px;
    }

    Now, I need to get the mobile responsive menu to display for the new position.

    I will try and research how to do that and if I cannot find anything, I will ask here.

    Thanks Wes

    January 2, 2020 at 1:23 pm #23699
    Wes
    Moderator

    Do u have link to your site?

    Also, did you want to remove that Parallax feature? I’m removing it in future updates since it causes too many issues on certain browsers. I’m noticing other theme devs doing the same. If you prefer to have it removed now just let me know.

    January 2, 2020 at 2:47 pm #23702
    SavvyPro
    Customer

    Site Link: https://devsite3.savvyprosolutionsllc.com

    I am not having any issues with the parallax effect at this time, but I am having issues with the site header getting bumped up and getting slightly cut off by the navigation menu’s border. I added the following jQuery code to try and correct it, but the problem persist:

    // Adjust header when scrolled
    
    jQuery(document).ready(function($){
        $(".site-header").after('<div class="bumper"></div>');
        $(window).scroll(function () {
    	  if ($(document).scrollTop() > 1 ) {
    	    $('.site-header').addClass('shrink');
    	  } else {
    	    $('.site-header').removeClass('shrink');
    	  }
    	});
    });<!--formatted--><!--formatted-->
    January 2, 2020 at 3:00 pm #23707
    SavvyPro
    Customer

    Okay, this seemed to have worked for to help with the site header not getting cut off:

    .site-header .wrap {
    	padding: 15px;
    }
    January 2, 2020 at 3:24 pm #23708
    SavvyPro
    Customer

    Wes, after this request, I should be good to go.

    Do you think you can help me fix the mobile responsive menu portion now since that seems to be the only thing left for me to take care of on this?

    Thanks man, appreciate your help.

    January 2, 2020 at 5:35 pm #23709
    Wes
    Moderator

    I’m looking at the site now, just trying to figure out what’s going on.

    January 2, 2020 at 9:38 pm #23710
    Wes
    Moderator

    Unfortunately I’m not sure what’s going on. This is one of those customizations that would require extra time as there’s probably a lot more coding that would need to be done to get it working.

    There could be a 3rd party plugin or custom code that is conflicting with it which is causing the issue. I’m not 100% sure. I’m seeing some unusual activity when I inspect the site which doesn’t show up on the demo. It could be coming from a script or something.

    It looks like the mobile menu is opening up as it’s supposed to, but there’s not a clear way to close it properly since the toggle is hidden. This particular menu was originally designed to work inside the header.

    Also, you may already know this but the Mobile menu isn’t really designed to be in a “fixed” position when scrolling down as some mobile browsers don’t support the “fixed” position. That’s why it only works on Desktop versions of most Genesis Themes.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework