willp

This JUST happened to me today for some crazy reason. I’m using 4.8.3. This is really bad. Had 13 pages get thrown into trash and I don’t even know how many images disappeared. Wow.

Appreciate the suggestion, but it does not help unfortunately. The height shifts/becomes too “tall” oddly at a certain point still, as noted previously.

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:

https://tinyurl.com/q9hueuj

I’d love to hear your thoughts. Thanks.

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.

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.

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.

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: https://tinyurl.com/n9czt8e

After: https://tinyurl.com/oo9rd88

Hope these can help in some way. Thanks.

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?

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?

Got it worked out.

I fixed it myself actually. Couldn’t figure out how to move “body text” content over to the left, but figured out how to shift logo and menu to the right *enough* to align all up. One just has to add a line for padding at the end of the code as I did below. Then adjust the number until all looks properly justified/lined up down the page.

.primary-navigation li {
border: 0;
display: inline-block;
height: 1rem;
line-height: 0.625rem;
position: relative;
text-align: left;
padding-left: .97rem;

Thanks for the suggestion. I think you meant “align: left” since that’s what we really needed to do. I tried that and it still doesn’t work. There is still some

hidden padding

on the left hand side of the “frame” for any body content. It definitely will “center,” of course. But even when I left align, the padding is there and thus the alignment is still off. (Not straight all the way down from logo, to menu, to body text, to footer text.

Appreciate the try.

I will try asking there. Hadn’t spotted that. Thanks, Michael.

Found it on my own. Hope this can help someone else. Get the Simple Custom CSS plug-in then add this code:

.primary-navigation a {
font-size: 36px;
padding:0 5px;
}