Question posted in 
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.
2
Answers
I had a local CSS guru look at everything with me and we determined that it was a media query that needed to be added. I agree that I was too vague to get good support from SOF and that the place I should have went to was the Theme's support forums. Regardless, thank you all for taking the time to add a comment.
So maybe they aren’t that great of themes in terms of quality. Maybe those responsive issues are issues with the code in the themes, or are compounded by the modifications you’re making. And since not everyone has a copy of those paid themes, the best thing to do is go to support for those themes and ask there about issues with the themes and help with the changes you want to make.
Each theme can be different; either Javascript for CSS can be used in different ways for mobile display in terms of menus changing to mobile versions, or CSS and media queries.
You need to ask for support or bug fixes from the companies you bought the themes from.
Other than that, your question is too vague to try and answer. You need to show specific code examples for the responsiveness, jQuery, break points and media queries.