Archived topic
Including the secondary menu within the header area + sticky scrolling
14 replies · Started by Carrie on June 5, 2020
Hello, I'm building a site that I'd like to have all included in the header area: the logo + primary menu + secondary menu. My header area is sticky and I'd like all of that to display when I scroll, not just the logo + primary menu.
Example: https://drive.google.com/file/d/165dKsXuSFvToA4JWHQN97K9ydlVDRG9d/view?usp=sharing
I've tried changing the settings in Customizing ▸ Layout ▸ Secondary Navigation and nothing seems to work. I thought that Navigation Location: Float Right would work, but when I select that the Secondary menu disappears. (That's what it's set as now.)
Thank you for your time & assistance!
Hi there,
I'm not able to see the screenshot as access is required.
Can you use a service like this and post the direct links here?
https://postimages.org/
Let me know :)
My apologies, here you go: https://postimg.cc/gxSCNfpL
So would the toggle be the off canvas panel?
If so can you activate it for desktop first?
https://docs.generatepress.com/article/off-canvas-panel-overview/
I don't believe so. I don't think I want to use the off-canvas panel option. Ideally what I want to happen is to have the Primary menu on the left and the Secondary menu floated to the right, all in one line, all included in the sticky header area. Is that doable?
Try using the menu-item-float-right solution:
https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right
I don't want to float an icon to the right, but an entire menu.
generate_inside_navigation "Primary Menu + Secondary Menu"
I'm guessing this isn't an option withing GeneratePress, I'll just create an Elementor template then for the header area.
That class allows you to float any menu items to the right.
If you add that class to any menu item then you will see how it works.
Hi Leo,
It's not single menu items I want to float it's a whole menu.
I researched some more and found move secondary nav using that code it put the Secondary menu up into the header area like I want:
//* Move secondary menu to within header
add_action( 'after_setup_theme','tu_move_secondary_nav' );
function tu_move_secondary_nav() {
remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
add_action( 'generate_inside_navigation', 'generate_add_secondary_navigation_after_header', 15 );
}
But that is showing the secondary menu on the left and the primary menu on the right, is there any way to reverse that?
It’s not single menu items I want to float it’s a whole menu.
Can you try adding menu-item-float-right class to all the menu items you want on the right side?
You should get the exact same layout as you've shown in the screenshot unless I'm missing something here.
Okay, I added menu-item-float-right class to all of the menu items within the Secondary menu.
It just rearranged the menu items within the Secondary menu, it didn't move the Secondary menu to the right.
Let's not use the secondary navigation here yet.
Try adding all the menu items in the primary navigation, then add the menu-item-float-right classes to all the menu items you want to position on the right side.
Ahhhh, yes that works perfectly. Thank you so much for bearing with me, I truly appreciate it!
One last question... where are the mobile menu color options?
Found it, had to add the primary menu to the Off Canvas Panel. Thank you again.
No problem :)