If you’re a WordPress website developer/designer/programmer, you’ve probably run into this issue multiple times, like I have. There are several great premium Responsive themes that have a “desktop” header at <981px width and a mobile header at >980px width. The “desktop” header style is with the logo on the left and the menu items on the right – a classic style. All is well and good until you have a large menu with several menu items. Then at about 1100px wide, the header items run into your logo and either go right over/behind it, or sometimes will get bumped down to a new line. I have also seen the logo get bumped up to a new area that appears out of nowhere, adding a white full-width space to the top of the page that was not there before. In any case, it looks BAD!
I’ve tried adding media queries ever 150px or so that change the padding in between the header menu items, making them scrunch horizontally more and more… and I’ve also tried making the header menu item font get smaller at certain sizes to make up for the narrowing width. But, these “fixes” just make it look bad, with the font being too small for the average eyes or the items too close together to determine where one page name ends and the next begins!
I have studied my websites’ codes in depth. I am using themes like Avada, Divi, and Salient, to name a few. They all have the same thing in common: it seems that the header switch is triggered by jQuery rather than CSS. My first question is, does anyone know if this is correct?
And, ultimately, what I want to do is change the number that the mobile menu is triggered at (typically 980px width) to a HIGHER number, forcing the mobile menu to appear at more like 1100px width instead. This would fix the problem universally. Side note: An iPad in landscape layout (tilted sideways) uses the desktop menu instead of the mobile menu. So this would also fix that issue, keeping the menu mobile even on a large tablet which has been tilted sideways for widescreen viewing.
I barely know any jQuery, and I’m still relatively new to CSS. Has anyone had this issue before and could shed some light on what is happening code-wise and how to fix it? All replies are appreciated. Thanks.