I have been trying to make adjustments to the header and footer on my website when I noticed the header ‘expands’ when hovering over one of the menu links (https://highfallscannany.com/). This is obviously not ideal since it requires users to adjust their mouse position a second time when trying to click one of the header links. I am using the Stiletto theme and selected transparent header option. When I disable the transparent header option it fixes the issue and the header does not change size on hover, is there a way to keep that option with the transparent header option enabled?
I am not sure why I have not been able to make changes to the header and footer on the Stiletto theme. I keep trying to adjust the footer size as well and there is no option to change the size or background color for this either, but I’ll leave that for another thread. Please let me know if there is anyway to fix this issue with the transparent header, thank you!
Thanks for sharing the store URL. I checked the root cause of the resized header when we hovered over it and discovered that it was due to the different sizes of the logos being used. I have added the screenshot for your reference below where you can see that the regular logo (on the left) is smaller compared to the logo which is visible when hovered over the menu (on the right).
So the best solution to this problem will be that you get both logos of the same size. Otherwise, a temporary solution can be to fix the height of the logo using the code. To fix the issue using code please check the steps below:
Open the code editor, as shown in the screenshot below.
Done? Now save the file, and try previewing your store to verify the changes. Please check the Video link to see how it will look like on your store.
[NOTE]: In the video, you might notice the logo resizing slightly. This happens because the logo visible after hovering is a bit larger than the regular logo and includes extra spacing below it as shown in the screenshot I added. Once you upload both logos with the same dimensions, this issue should be resolved.
I hope this helps!
If my response helped you, please consider giving it a like ( ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.
) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.