Force mobile menu on iPad in landscape mode


I’m working on a build of this site:

In landscape mode on my 9.7 inch iPad, the header breaks into 2 lines (attachment). According to Safari’s Responsive Design Mode, this will also occur on an iPad mini (7.9 in) and iPad pro (10.5 in).l Is is possible to force the mobile (hamburger) menu icon in these cases? After searching similar threads, I tried some of the CCS code suggestions but nothing seemed to work.

Many thanks!

hey there

Hope you are having a good day and thank you for your question :slight_smile:

Please add this CSS in appearance - customize - additional CSS

@media (min-width: 1200px){
.main-navigation .menu > li {
margin-right: 10px;
.main-navigation .menu li a {
font-size: 13px;

Colorlib Support Team

After a bit of tweaking, this seems to be a good workaround. For the benefit of anyone reading this: it reduces the size of the full menu in landscape iPad so the header doesn’t run over 2 lines. (That is to say, it doesn’t push the mobile menu, but this is even better.) Thank you!

Hi There,
Thanks for the feedback and sharing your approach.
This will certainly assist someone else in a certain situation.
Have a good one.