Logo overlap

[andy8383]

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 !

[Mohammad – SUPPORT]

Hi,
First ,please provide your website URL so i can check and resolve and try this please add the logo width and height in the ‘Theme Options’ -> ‘Header Options’ and add the appropriate values in the ‘Logo Width’ , ‘Logo Height’ and ‘Logo Resized Height’ fields.

With Best Regards
Swiftideas Themes

[andy8383]

This reply has been marked as private.

[Melanie – SUPPORT]

@media only screen and (max-width: 767px){
#logo {
background-size: 250px auto!important;
}
}

Can you try this custom css?

[andy8383]

Thanks Melanie and Mohammad!

I hadn’t tried setting the background-size property as I didn’t realize the logo switched from an image to a background image at that point but that makes perfect sense as to why you can no longer select it or inspect it as an image. That selector worked perfectly. I’ll certainly remember to try it from now on when I’m having any image selecting issues.

I went with:

@media only screen and (max-width: 480px) {

#logo {
background-size: 200px auto !important;
}

to try and closely match the break point for the sticky header logo, and its size.

[Kyle – SUPPORT]

Great! Good job

[Mohammad – SUPPORT]

Great ! I appreciate it .
Thanks 🙂
With Best Regards
Swift Ideas