Community Forums › Forums › Archived Forums › Design Tips and Tricks › Repositioning navigation menu
Tagged: navigaiton position, navigation, parallax-pro
- This topic has 13 replies, 2 voices, and was last updated 8 years, 8 months ago by Hashim.
-
AuthorPosts
-
August 2, 2015 at 8:52 am #161167HashimMember
Hi there,
Once more I'm relying on your support to help me with a problem I can't seem to solve on my own. And before sharing my problem with you, I'd like to thank you for taking the time and effort to read this and for your willingness to help. I know you're doing this in your own free time to help others and I want you to know that I truly appreciate it! π
I'm using the Parallax Pro theme for my website: http://hashimnaushahi.com
And I want to show a different navigation menu on different pages the easy way using the plugin Genesis Simple Menus. The plugin only works for the Secondary Navigation. And the Secondary Navigation is positioned in the footer in the Parallax Pro theme while the Primary Navigation is positioned after the header. And because I'm not using the Primary Navigation I can place the Secondary Navigation on the same place as where the Primary Navigation would be after the header so I can profit from the Genesis Simple Menus by using different navigation menus for different pages while the Secondary Navigation is located after the header.
On the StudioPress there's a snippet for this which looks like this:
//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );The problem I think lies in a piece of code that's already present in the functions.php file which looks like this:
//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 7 );//* Reduce the secondary navigation menu to one level depth
add_filter( 'wp_nav_menu_args', 'parallax_secondary_menu_args' );
function parallax_secondary_menu_args( $args ){if( 'secondary' != $args['theme_location'] )
return $args;$args['depth'] = 1;
return $args;Up until now all changes I made to this code only resulted in removing the Secondary Navigation from the footer but I can't get the Secondary Navigation to show after the header.
I really hope you can help me come up with the right approach to make this work. Thank you in advance and I'm looking forward to your suggestions!
Sincerely,
Hashim
http://hashimnaushahi.comAugust 2, 2015 at 11:16 pm #161201ChristophMemberHi Hashim,
if you want the secondary navigation in the same location, and you are definitely not going to use the primary navigation, just use the same hook.
So the existing//* Reposition the secondary navigation menu remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ ); add_action( ‘genesis_footer’, ‘genesis_do_subnav’, 7 );
becomes
//* Reposition the secondary navigation menu remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ ); add_action( ‘genesis_before_content_sidebar_wrap’, ‘genesis_do_subnav’ );
After that you probably won't see any change because the font color of the secondary navigation is white.
You will have to change the font or background color.
August 3, 2015 at 8:28 am #161249HashimMemberHi Christoph,
Thank you so much for trying to help!
Unfortunately it didn't come out the way we expected. I replaced the code exactly the way you suggested. And I also believed it would work because the position before the content and after the header are almost the same. You can see a screenshot over here with the result:
There's this white space between the header and the menu. Probably because of the position we used for this. Before content and after header seems to be two different locations.
In my logic removing the entire piece of code would result in bringing the secondary navigation back to its original position after the header. But I found it doesn't work that way. Because when I remove the code to reposition the secondary navigation, the secondary navigation disappears altogether.
Once again, thank you for your effort Christoph and I do hope you come up with another suggestion. π
Sincerely,
Hashim
August 3, 2015 at 8:34 am #161258ChristophMemberHi Hashim,
I cannot open the link without signing in to Evernote.
Parallax Pro has different locations for the navigation and the css is reflecting that.
You will have to adjust the css for the secondary navigation to get the look you want.
August 3, 2015 at 9:01 am #161264HashimMemberHi Christoph,
Thank you for your suggestion! I'll try to adjust the css. Basically it's removing the margin between the above content area and after header area and adjusting the width of the above content are, right?
The one thing I don't understand is how come it's not possible to use the after header location again. Do you know what might be the cause of that?
Thank you in advance! I'l try to adjust the css and I'll you know how that goes. π
Sincerely,
Hashim
August 3, 2015 at 9:16 am #161268ChristophMemberHi Hashim,
you can use the genesis_after_header hook.
You just have to write more css code to position it.
August 3, 2015 at 9:26 am #161273HashimMemberHi Christoph,
You're saying I can use that hook? How?
I mean...
1. How would I adjust the code in my functions.php file in the existing code for the repositioning of the secondary navigation so that it's positioned after the header?
2. And how come I can't see the secondary navigation after I tried to remove or adjust the code to position it after the header?
Without seeing it, I don't know if it's there and I also can't use Firebug to find the css I need to change.
Your reply really made me curious and it gives me hope that it's still possible to show the secondary navigation after the header! π
I'm looking forward to your reply!
Sincerely,
Hashim
PS Thank you for the time and effort you're putting into this!
August 3, 2015 at 9:52 am #161276ChristophMemberHashim,
we are going in circles here.
Let me try to explain from the beginning.You first stated that you wanted the secondary navigation in the same place as the primary navigation would be.
Look at the code, the primary navigation is located in genesis_before_content_sidebar_wrap.
This is why I gave you the first code snippet and mentioned that you will need to adjust the css to style it.
The white space should show up for the primary navigation as well.
You could add a negative margin-top to nav-secondary and would probably have to adjust it in the media queries..nav-secondary { margin-top: -***px; }
Since Parallax Pro has changed the positions of the navigations, the css is reflecting that and does not account for you changing it around. ThatΒ΄s why you will have to write your own css code to show it in different locations.
Don't get confused by the names of the hooks.
If you move the secondary navigation to the genesis_after_header hook it will be positioned at the very top of the page, because the secondary navigation has no styling to tell it otherwise. Hence, you have to write more css code to position it in the same area as genesis_before_content_sidebar_wrap.
August 3, 2015 at 11:28 am #161301HashimMemberHi Christoph,
First of all, my apologies for the misunderstanding! I've totally misread and misunderstood the situation. And I think that my question was formulated entirely wrong because of that. Sorry for the loss of your precious time in this matter.
Basically what I'm looking for is to have my Secondary Navigation positioned right beneath the header without any margin or white space between the header and with the same width as the header which is full-width. I don't know what would hook would be wiser to use to have the Secondary Navigation in that position and keep it there on mobile devices.
From what I understand right now from your last comment is that it's easier or less work to use the genesis_before_content_sidebar_wrap hook than it would be with the after_header hook. Is this correct?
I tried Genesis Visual Hook Guide to understand the theme a bit better and I think I understand now where the white space is coming from in the before content hook.
Thank you for your kindness!
Sincerely,
Hashim
August 3, 2015 at 3:06 pm #161319HashimMemberHi Christoph,
I've got just two final questions to get a total understanding of what you shared with me. Not only to reach my desired goal, but also for my learning process so I can apply this knowledge in similar situations in the future. I hope you're still willing to help me with the answer.
When you say that when I move the secondary navigation to the genesis_after_header hook it will be positioned at the very top of the page, do you mean it will be all the way at the top like the header so that you can't see the secondary navigation anymore because it's basically behind the header or do you mean at the top op of the page right underneath the header so that it is visible?
And if I do want to use the genesis_after_header hook, how should I change the existing code in the function.php file that is basically telling to remove the secondary navigation from that hook and position it somewhere else?
Your answers would be really helpful to me. Thank you in advance!
Sincerely,
Hashim
August 3, 2015 at 4:48 pm #161332ChristophMemberHi Hashim,
no need to apologize.
Thank you for clarifying what exactly you want to achieve. πYou won't be able to get a full-width secondary navigation on the genesis_before_content_sidebar hook.
But you can achieve full-width by using the genesis_after_header hook.You are correct. Using the genesis_after_header hook will position the secondary navigation at the very top of the page, invisible "behind" the header. I included the css to show it below.
Since the "regular" position of the secondary navigation is the genesis_after_header hook, just comment out the original code like this:
//* Reposition the secondary navigation menu //remove_action( 'genesis_after_header', 'genesis_do_subnav' ); //add_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_subnav' );
To "show" the navigation you can add this to the style.css
.nav-secondary {
background-color: #000;
margin: 70px auto 0;
}You might have to adjust this in the media query.
August 3, 2015 at 6:05 pm #161335HashimMemberDear Christoph,
You're amazing!!!
It worked!
You can see it on this page: http://hashimnaushahi.com/qasas
I now have the second navigation menu right underneath the header. How did you know that the size of the margin should've been 70px? I was searching for the vertical size of the header area but I couldn't find it.
I've been able to make the adjustments in the media query and I've tested my website on my mobile device. And the secondary navigation shows beautifully underneath the header without any white space in between.
Christoph, you've been a great help! Thank you very much!
There's one final question I'd like to ask you concerning the secondary navigation. And I hope you're willing to help me find the answer to it.
Do you know how I can fix the position of the secondary navigation underneath the header even while scrolling? That's my last wish for the positioning of my navigation.
Thank you in advance!
Sincerely,
Hashim
August 3, 2015 at 9:30 pm #161347ChristophMemberHi Hashim,
IΒ΄m happy it is working. π
I used the Developer Tools in my browser to check for the margin.
Simply right-click on the website or a part of the website and select Inspect Element.To make the secondary navigation "sticky" add
position: fixed; width: 100%;
to your nav-secondary css.
You will also need to add more margin-top to site-inner (so it is 260px or more... )
August 4, 2015 at 4:06 pm #161437HashimMemberHi Christoph,
Thank you for your suggestion! It worked perfectly!
After giving it a try, I decided not to keep the secondary navigation because of the space it takes. But it's nice knowing how I can do this in the future.
Christoph, you've been a great help! Thanks a lot for spending your precious time helping me with yet another step closer to my goal. I wish you all the best!
Sincerely,
Hashim
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.