[Support request] Extra "hidden" padding & Missing search icon

[Jessica]

I’ve been searching & scrubbing and can’t find where but:

At the point of 1075px wide I am getting a horizontal scroll, suggesting either hidden padding or something

The layout width is set to max 1040px and the first media query breakpoint isn’t until 938px. I checked all my padding(s) and even removed them all over to test and I can’t get rid of the extra width.
Any ideas?

And: Missing search icon on devices
Also, I can’t seem to figure out why the search icon is not showing up on mobile (literally, on a phone). On the desktop/laptop version, when I resize, it is visible. I’ve cleared caches, et al and am stumped. Is this a known thing?

[Jessica]

I think I might have found 1 possible cause: The Main Nav Width (default).

I changed things around to center/center (logo/nav) and as soon as it snaps into mobile layout (exactly 768px wide) the navigation elements go into “hamburger icon + search icon”. However that is when the extra width is showing again.

I’ll keep digging but I haven’t added any extra styles (definitely not padding) to the right/left of these elements.

[Jessica]

Screenshot of how I got rid of the horizontal scroll

However, I prefer the original “inline” layout – just can’t get it back without the horizontal scroll.

Hope this helps.

[Tom]

That’s strange, are you getting the same thing on the demo? http://demo.generatepress.com

[Jessica]

Hm. No. So that means I must have done something to screw it’s up.

What is strange is that your menu behaves perfectly. I had to add styles to get the elements in place.

If I have the navigation float right vs. centered on the desktop version, the mobile and sticky display are not like demo.

I’ll scrub my style sheet. It sounds more likely that I forgot about something I did that’s offsettuing things.

Stay tuned. Thanks!

[Jessica]

Alright –> Getting somewhere!!! 😀

I scrubbed and removed any reference to the navigation (main, sticky or otherwise) and I’m still getting the extra padding (causing the horizontal scroll at the 768px break point & the search icon disappears on mobile).

I could be very overtired/under-slept/under-caffienated. Anything is possible 😉

I’ll upload the dev site to a staging server so you can see, unless I find it. I’m totally stumped.

[Tom]

Me being able to see it will definitely help 🙂

[Tom]

Think I found it.

Try adding this CSS:

.search-item .screen-reader-text {
    top: 0;
    right: 0;
}

[Jessica]

Thanks Tom. Going to try now.

I have a little stage fright posting a link to an unfinished site here (publicly) as its for a startup. :/

[Author]

Posts