Hi there,
This is happening because the menu left and right menu padding you are using are quite large so it doesn’t have enough space when the screen gets below around 1020px.
Two solutions for this:
– Reduce the menu padding for tablet using the CSS below and fine tune the px number:
@media (min-width: 769px) and (max-width: 1024px) {
.main-navigation .main-nav ul li a {
padding-left: 20px;
padding-right: 20px;
}
}
– Increase the mobile header breakpoint to like 1050px with this CSS:
https://gist.github.com/generatepress/c23aef2d05807c39bb32
I would suggest the second solution.
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps 🙂