Hello,
I’m having an issue on smaller screen layout such as an i-phone 4 in portrait mode. The logo up top on first load ( this is he one which has transparent background before one would scroll down and the sticky header is rolled in) overlaps the mobile menu symbol and then extends off the screen to the right.
This makes it both difficult to use the menu initially, and to read the logo.
Once you scroll down a bit and the sticky header logo is used , the sticky header logo actually automatically resizes down to a smaller size under about 600px screen width or so which leaves room for the mobile menu and does not overlap or run off the screen. But the first loaded version of the logo with transparent background does not do this like its sticky header counterpart.
I have tried manipulating the CSS in my media queries to set a max-width on the initial logo element, but nothing seems to target it. neither the #logo id , the anchor in it, or the image elements properly target only the initial logo element once the screen is at a width of 1024 or so or less. This os the same point in time when the initial logo element loses its link as well. if the screen is loaded wider it acts as a link to the main page. but under 1024 or so it loses this link and apparently its ability to be easily styled via CSS as well. Using a browser inspector its hard to even tell what the element there even is at that point in time as none of the ties in the DOM seem to target it anymore.
It would be great if this initial header automatically resized down to make room on small width screens just like the sticky header logo does. OR if you could possibly let me know how to specifically select it via CSS i can just change it via media query.
Thanks for any input !
.
