[Resolved] Menu breaks on Mobile

[Sars]

Dear Team,
Kindly help on this.

The Offcanvas Panel and menu does not fit together on the site. When i try to add an html widget, the widget goes into second line. The hamburger icon and cart icon gets attached to the logo.

Current Look:
https://ibb.co/C8v01CZ

Expected look:
https://ibb.co/rbbxbKX

Current look Breaks into separate line on mobile like this:
https://ibb.co/znxx5hp

Expected on mobile:
https://ibb.co/KXXfD8y

[David]

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.

[Sars]

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

[David]

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;
  }

}

[Sars]

Super. Works Very Well!

Thank you

[David]

Glad to be of help

[Sars]

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

[David]

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;
}

[Sars]

Thanks a lot David. That solves the problem 🙂

[David]

Glad to hear that

[Author]

Posts