Site logo

Archived topic

Including the secondary menu within the header area + sticky scrolling

14 replies · Started by Carrie on June 5, 2020

Viewing posts 1–15 of 15

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 :)

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?

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 :)

This archived topic is closed to new replies.