Responsive formatting issuess

I created a website using Elementor. There is a problem with the responsive design when it is between full screen and tablet size where my header becomes distorted. I just learned literally everything about making a website from scratch and was wondering whether anyone has any solutions within Elementor.

I put an ad on codeable for this and a CLS shift fix and got some pretty high prices, only to fix the CLS shift and pagespeed myself so hoping someone can point me in the right direction so I can fix it myself.

You can see what I mean here:

Can you post a screenshot showing the problem @scalia059 as I can’t replicate the issue?


It only occurs at a narrow screen size. Elementor lets you design for desktop, tablet, and mobile. It occurs essentially when the screen size is in between desktop and tablet. Any guidance would be appreciated! Thanks for getting back to me!

I don’t have any knowledge of elementor but a quick google search shows a method to adjust breakpoints.

I’m assuming the issue is that the red box drops to a new line before the hamburger pops into view. If you increase the breakpoint you can change to tablet a little earlier and avoid the drop.

You could probably just adjust the padding and size of the menu items in css instead so that they don’t break too soon but that would require you to create your own css edits.


Wow, thank you this worked perfectly!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.