One Row Mobile Navigation

Hi there,

first thing to deal with would be the secondary navigation inside the mobile off canvas. - the simplest way is to add a Navigation Menu Widget to the Off canvas panel. We can then apply some CSS to hide it on desktop.

If you can set that up and share a link to the site i can provide some CSS to create that layout.

Thank you, David! I send you some private information.

Hi Daniel,

Seems you haven't added the secondary navigation into the off canvas panel?

There's only 1 menu item in secondary navigation, you can add it as a menu item into off canvas panel menu. Then we can use some CSS to hide it on desktop.

Then you can use this CSS to hide the secondary navigation and move shopping bag to right on mobile:

@media (max-width: 768px) {
    nav#secondary-navigation {
        display: none;
    }
    .menu-bar-items {
        order: 3;
    }
}

Hi Ying,
thank you very much! I've added the secondary navigation into the off canvas panel and when I check the mobile version, it works fine. But now I have a problem with the mini cart. On the mobile view the mini cart is looking fine, but on the desktop it is visibile at the off canvas panel. That's wrong. It should be visible at the top right like the secondary navigation. When I use the following filter to move the mini cart item to the secondary menu, it will be lost on the mobile view, because of the css, you have sent me:

The filter:
add_filter( 'generate_woocommerce_menu_item_location', 'tu_move_menu_cart_item' );
function tu_move_menu_cart_item() {
return 'secondary';
}

Your css:
@media (max-width: 768px) {
nav#secondary-navigation {
display: none;
}
.menu-bar-items {
order: 3;
}
}

Please also have a look at the attachment:
https://quickforget.com/s/defdedfec25354dc04d4a89212dc10f111b80b31e767a483

Thank you for your help,
Daniel

OK - lets take a step back...

Remove the Secondary nav from the Off Canvas Panel.
Now edit the menu you have assigned to the Off Canvas Panel. And add the same link(s) you have in your secondary menu. So its one complete menu.

In the WP menu builder you can add a CSS class to those menu items - see here:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

For the secondary links add a class of hide-on-desktop

Hi David, thank you very much for your reply! I followed your steps and it works, but I still miss the mini cart item at the top right of my mobile menu. I would like to have the following order on the mobile view:

Off Canvas / Logo / Mini Cart

When I use the following snippet, I can move the mini cart to the top right at the desktop, but on mobile it will be hidden, because of the css lines from Ying:

add_filter( ‘generate_woocommerce_menu_item_location’, ‘tu_move_menu_cart_item’ );
function tu_move_menu_cart_item() {
return ‘secondary’;
}

@media (max-width: 768px) {
nav#secondary-navigation {
display: none;
}
.menu-bar-items {
order: 3;
}
}

Well this is fun :)

Can you add this snippet now - which will add the cart back to the Primary Nav:

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
} );

Once its in there i can look at the CSS required to remove it from the desktop primary nav

Done! I have added the snippet to my functions.php

add_action( 'wp', function() {
    add_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
} );

Hi Daniel,

Is this what you are trying to do?
https://docs.generatepress.com/article/move-woocommerce-cart-toggle-into-the-menu-items/

Let me know :)

Hi Leo, I described David, what I would like to do ;) I embbeded your code snippet, but that doesn't fit to my needs. I have followed all the steps of David and Ying and all is working fine. The only thing I miss, is the mini cart on the top right in the mobile view. I would like to have this order on mobile devices:

Off Canvas Menu / Logo / Cart

But thats not possible, when I am using these codes together:

add_filter( ‘generate_woocommerce_menu_item_location’, ‘tu_move_menu_cart_item’ );
function tu_move_menu_cart_item() {
return ‘secondary’;
}

@media (max-width: 768px) {
nav#secondary-navigation {
display: none;
}
.menu-bar-items {
order: 3;
}
}

Please have a look at the screenshot, what I mean exactely: https://quickforget.com/s/868cfc78ed3c72e6643dd745fe3622a0f6a2e4a37a45b8ab

I'm actually not seeing the minicart on mobile currently:
https://www.screencast.com/t/f4U682NJWKr

Is that what you are seeing?

Yes, Leo ;) That's my problem. It's because of these css lines:

@media (max-width: 768px) {
nav#secondary-navigation {
display: none;
}
.menu-bar-items {
order: 3;
}
}

But these lines are necessary. Please have a look at our conversation at the top ...

Can we do a quick test to see if the generate_menu_bar_items hook is working by adding this snippet:

add_action( 'generate_menu_bar_items', function() {
    ?>
        <span class="menu-bar-item">
            <a href="#">Your icon HTML</a>
        </span>
    <?php
} );

If you add that does Your icon HTML appear in the Main navigation and the Mobile header ?

I added the snippet and yes, the Your icon HTML will appear in the main navigation (= off canvas) and the mobile header.