Archived topic
Extra "hidden" padding & Missing search icon
8 replies · Started by Jessica on September 11, 2016
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?
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.
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.
That's strange, are you getting the same thing on the demo? http://demo.generatepress.com
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!
Alright --> Getting somewhere!!! :D
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.
Me being able to see it will definitely help :)
Think I found it.
Try adding this CSS:
.search-item .screen-reader-text {
top: 0;
right: 0;
}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. :/
