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');
	  }
	});
});
```
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.