- This topic has 8 replies, 2 voices, and was last updated 5 years, 2 months ago by Jessica.
September 11, 2016 at 6:52 pm #225656Jessica
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.
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?September 11, 2016 at 7:13 pm #225658Jessica
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.September 11, 2016 at 7:30 pm #225660Jessica
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.September 11, 2016 at 11:10 pm #225679TomLead DeveloperLead DeveloperSeptember 11, 2016 at 11:39 pm #225691Jessica
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!September 12, 2016 at 7:07 am #225808Jessica
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.September 12, 2016 at 8:17 am #225833TomLead DeveloperLead DeveloperSeptember 12, 2016 at 8:26 am #225835TomLead DeveloperLead DeveloperSeptember 12, 2016 at 3:35 pm #225927Jessica
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. :/
- You must be logged in to reply to this topic.