Menu breaks on Mobile

Hi there,

instead of using the Widget area, create a new Block Element:

https://docs.generatepress.com/article/block-element-overview/

you can select Hook: menu_bar_items to add the icon alongside the other menu items.

Thanks David. Works very well.

Just a small question, How to give a line break to the menu items, as the menu almost touches the logo as in the below pic and also to move the hamburger icon to the right.

https://prnt.sc/10myx4d

Thank you

Try this CSS:

@media (max-width: 600px) {
  .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    flex-wrap: nowrap;
    margin-left: unset;
    margin-top: 10px;
    flex: 1;
  }

  .main-navigation .menu-bar-items {
    flex: 1 0 calc(100% - 70px);
    justify-content: space-evenly;
  }

  .menu-toggle.secondary-menu-toggle {
    text-align: right;
  }

}

Super. Works Very Well!

Thank you

Glad to be of help

Hi David,
I just noticed that when we add Items to cart, the cart menu breaks into second line.

Kindly help on this.

Thanks a lot.
https://prnt.sc/10ncek8

The issue is the limited amount of space for those elements on small devices.
You can do a few things to give it more room:

1. Customizer > Layout > Site Header - switch to mobile view and reduce the padding to say 10px.
2. Customizer > Layout > Primary Navigation - again in Mobile view reduce the Menu Item Width
3. And then last we can add some CSS to keep the icon and the total inline:

.cart-contents.shopping-cart.has-svg-icon {
  display: flex;
  align-items: center;
}

Thanks a lot David. That solves the problem :)

Glad to hear that