[Resolved] Menu float right on desktop – Menu under header on mobile

[Joey]

Is there a way to make navigation location float right on desktop, and under header on mobile (for secondary navigation)? I used this code to make my secondary menu remain (without hamburger) in mobile:

add_action( 'wp_enqueue_scripts', 'generate_dequeue_secondary_nav_mobile', 999 );
function generate_dequeue_secondary_nav_mobile() {
    wp_dequeue_style( 'generate-secondary-nav-mobile' );
}

But it only works if my menu isn’t floating in customization settings…

I’m trying to do this in desktop. And I’m trying to do this in mobile.

I’ve been working on this all night and am stumped. The link is below (currently floating). Thank you.

[David]

Hi there,

try this PHP Snippet:

add_action('generate_after_primary_menu', function(){
	generate_secondary_navigation_position();
}, 50 );

This will hook in a duplicate secondary nav after the primary nav.

We can the add this CSS, so it only shows when the Mobile Header is present:

.main-navigation:not(#mobile-header) .secondary-navigation {
    display: none;
}
#mobile-header .secondary-navigation {
    flex: 1 0 100%;
}

[Joey]

Thank you David. It works for desktop, but this is what it looks like in mobile. The hamburger for the primary navigation has gotten pushed to a third row on the bottom, and the secondary navigation is now in hamburger instead of horizontal, and both hamburgers link to primary.

Maybe this would be a little simpler:
Instead of floating, I placed the secondary navigation location above header in the customizer, with right alignment. That way when I go to mobile, the secondary navigation doesn’t disappear. It looks good in desktop. Now the only issue is that in mobile, the primary navigation (logo and hamburger) is below the secondary navigation. Is there a way to switch primary and secondary navigation positions (in mobile only) so that the logo and hamburger stay at the top like the rest of the site? I’ve been trying to do this with CSS, but no effect. (See the link below.)

[David]

How about this:

1. Add this CSS:

@media (max-width: 768px) {
    #masthead {
        display: block !important;
        opacity: 1;
        overflow-y: hidden;
        overflow-x: scroll;
    }
    #masthead .site-logo {
        display: none;
    }
}

This should display the Secondary Navigation ( desktop view ) on Mobile.

2. Add this PHP Snippet:

add_action( 'wp', function(){
    remove_action( 'generate_after_header', 'generate_menu_plus_mobile_header', 5 );
    add_action( 'generate_before_header', 'generate_menu_plus_mobile_header', 5 );
});

This will move the mobile header above the site header, and therefore above the secondary nav.

[Joey]

David, that PHP works awesome, that’s the code I was looking for. Thank you so much.

Your CSS doesn’t work for some reason, maybe I’m doing something wrong. But this solution works with your PHP—I’ll post it here:

If I use this PHP, it keeps the secondary menu (desktop view) in mobile:

add_action( 'wp_enqueue_scripts', 'generate_dequeue_secondary_nav_mobile', 999 );
function generate_dequeue_secondary_nav_mobile() {
    wp_dequeue_style( 'generate-secondary-nav-mobile' );
}

And then I use this CSS to make the secondary menu scrollable on one line (in mobile):

.secondary-navigation .main-nav {
    overflow: auto;
    padding: 5px;
}
#secondary-navigation .main-nav>ul {
    flex-wrap: nowrap;
    scroll-snap-type: mandatory;
}
.secondary-navigation .main-nav>ul li {
    scroll-snap-align: start;
    flex: 1 0 auto;
    margin: 5px;
}

I have one last question, if you have time:
How do I change the background color of the secondary navigation with CSS? I tried .secondary-navigation but it doesn’t work, .secondary-navigation .inside-navigation is missing the edges in the outer container, I’m missing something simple. I’m trying to make my secondary navigation transparent in mobile.

[David]

Awesome – try:

#secondary-navigation {
    background: red;
}

[Joey]

I knew I was missing something really simple. Awesome David, thank you so much for all your help—it looks really good.

[David]

It looks great 🙂

Glad to be of help

[Author]

Posts