Title: Resizing issue for menu when screen changes size Last modified: August 30, 2016 --- # Resizing issue for menu when screen changes size * Resolved [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/) * We’ve now noticed there seems to be a design “flaw” in the theme and was wondering if there might be a way to fix with coding. * We noticed that whenever the browser windows is shrunk to thus mimic say a 13″ computer screen, the menu “breaks” and its height becomes far to large & breaks up the nav. links, thus making all look disjointed. If you push past that point all is fairly much fine but it does shift a bit more until the effective screen size is small enough. * In other words, the theme & menu look great on larger screens or only really tiny screens but not so much in between the two. At first we though it was extra code we used, but when we checked a pure version of the theme, it absolutely distorts as well. Thus any site using theme *should* mimic the issue. * Any thoughts or suggestions to prevent the menu from shifting around like that? Viewing 14 replies - 1 through 14 (of 14 total) * Theme Author [Styled Themes](https://wordpress.org/support/users/gejay/) * (@gejay) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435620) * Hi Willp, * Please add the followig css to fix the issue. * ``` @media (max-width: 991px) and (min-width: 768px) .visible-sm { height: auto; } } ``` * Note: use the custom css plugin or child theme stylesheet to write the css, so that custom code does not lost while update the theme. * Thanks * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435629) * Thanks for the suggestion. I gave it a shot and it them menu still expands and breaks things up a little and then contracts again once it goes past a certain small enough point. * I tried it on both sites were using it on to be sure as well. * Any other thoughts at all? Has this been successful used in the past? Do you need a screenshot? * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435636) * I can start another thread for this if need be, but I thought I’d maybe just ask here for the moment so I don’t bulk up the forums with tons of threads. * I just talked to our host who noted that the site has a very, very high I/O Usage. I looked at graphs for both this site and again another running the same theme and both have a problem with that. It’s much higher than anything we really should be seeing our host said, especially with only two or three people even visiting the site right now. * Any idea why it’s running so high with theme and thus causing some slow down issues? * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435648) * And just in case it helps and so I can be certain we’re thinking about the same thing in terms of the menu, here are “before break” and “actual break” of the menu during screen size reduction. * Before: [http://tinyurl.com/n9czt8e](http://tinyurl.com/n9czt8e) * After: [http://tinyurl.com/oo9rd88](http://tinyurl.com/oo9rd88) * Hope these can help in some way. Thanks. * Theme Author [Styled Themes](https://wordpress.org/support/users/gejay/) * (@gejay) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435667) * Hi willp, * It seems there is no proper uses of that css, we don’t know how did you add that code (custom css does not appear while inspect the site), this is perfect solution of the issue. Please use the custom css plugin or child theme stylesheet to write the css. * Thanks * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435674) * I didn’t add anything to any CSS on the site. It’s your theme “right out of the box.” It seems your coding for resizing the site causes the issue of the menu background color to double in size then shrink again. That’s your pure code for the theme. I don’t know how to fix what you wrote, so that’s why I asking if you could come up with something to prevent your menu from “breaking up” like that. * Thanks and hope that is clearer now. * Theme Author [Styled Themes](https://wordpress.org/support/users/gejay/) * (@gejay) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435684) * Hi Willp, * We found the bug in our theme, and we will fix in our next update. For now to fix that issue please add the following css in stylesheet. * ``` @media (max-width: 991px) and (min-width: 768px) .visible-sm { height: auto; } } ``` * Here is the link of custom css plugin [https://wordpress.org/plugins/simple-custom-css/](https://wordpress.org/plugins/simple-custom-css/). * Note: Use the custom css plugin or child theme stylesheet to write this code. * Thanks * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435690) * Thanks a million for this. I’ll give it a try right now and report back if there are any issues or concerns. * Really appreciate your help with all. * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 10 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435692) * Just tried the code you suggested which I realize now is the same as the one you suggested previously and it didn’t/doesn’t work unfortunately. The site menu still breaks/warps at certain screen size, before finally switching to the mobile menu. * Theme Author [Styled Themes](https://wordpress.org/support/users/gejay/) * (@gejay) * [10 years, 9 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435743) * Hi willp, * We don’t know how you put the CSS but there is no problem because we are going to updates the theme please stick in our social media for information. * Thanks * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 9 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435744) * I put it in there using the custom CSS coding plugin which you recommended above and I’ve even now used in other cases and does work nicely I must say. I just checked once again and the code is very much there. It’s still not working. ( Tried on two different sites now using the theme.) The menu height/background color doubles in size for a moment or so when resizing the switches to the mobile menu. * Here is a link to the live site so you can see for yourself: * [http://tinyurl.com/q9hueuj](http://tinyurl.com/q9hueuj) * I’d love to hear your thoughts. Thanks. * Theme Author [Styled Themes](https://wordpress.org/support/users/gejay/) * (@gejay) * [10 years, 9 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435749) * Hi Willp, Please add the following code to forced the css for working, there may be css override for height in css. * ``` @media (max-width: 991px) and (min-width: 768px) .visible-sm { height: auto !important; } } ``` * Thanks * Thread Starter [willp](https://wordpress.org/support/users/willp/) * (@willp) * [10 years, 9 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435750) * Appreciate the suggestion, but it does not help unfortunately. The height shifts/ becomes too “tall” oddly at a certain point still, as noted previously. * Theme Author [Styled Themes](https://wordpress.org/support/users/gejay/) * (@gejay) * [10 years, 8 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435770) * Hi willp, * We have fix the issue in latest version, so please update the theme. * Thanks Viewing 14 replies - 1 through 14 (of 14 total) The topic ‘Resizing issue for menu when screen changes size’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/pure-simple/3.3.0/screenshot.png) * Pure & Simple * [Support Threads](https://wordpress.org/support/theme/pure-simple/) * [Active Topics](https://wordpress.org/support/theme/pure-simple/active/) * [Unresolved Topics](https://wordpress.org/support/theme/pure-simple/unresolved/) * [Reviews](https://wordpress.org/support/theme/pure-simple/reviews/) * 14 replies * 2 participants * Last reply from: [Styled Themes](https://wordpress.org/support/users/gejay/) * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/resizing-issue-for-menu-when-screen-changes-size/#post-6435770) * Status: resolved