Return to previous page

Hero banner and menu overlapping in home page

This topic has 10 replies, 3 voices, and was last updated 8 months ago ago by Rose Tyler

Abhimanyu

Participant

June 15, 2024 at 11:17

my hero banner is getting hidden behind the menu.
i have out a top margin of ~70
it fixes the issue but when i zoom there is a gap that comes up.(pls refer to screenshot)
for now i have made that gap white but please tell me how to fix it without workarounds.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#399945 Copied Theme version: 9.3.11

9 Answers

Tony Rodriguez

Support staff

June 15, 2024 at 12:35

Hello, @Abhimanyu,

Thank you for contacting us and for using XStore.

1/ Upon reviewing your website, we did not observe any discrepancies between the header and the hero banner. For your reference, please review the images provided in the private content area.

2/ To assist us in understanding the issue more clearly, could you kindly record a video demonstrating the problem? Please upload this video to a file-sharing service, such as WeTransfer (https://wetransfer.com/), and share the URL with us.

Furthermore, we request that you provide a detailed description of the issue, including your specific requirements or the desired outcome. This will enable us to offer more targeted assistance.

Thank you for your cooperation. We look forward to your prompt response and are eager to resolve any issues at the earliest.

Best regards,
8Theme’s Team

Please contact administrator
for this information.

#399966 Copied

Abhimanyu

Participant

June 16, 2024 at 07:48

can you check again. on 90% zoom it looks fine, on 80%zoom image goes behind the header.

#400045 Copied

Rose Tyler

Support staff

June 16, 2024 at 10:51

Hello, Abhimanyu,

We hope this message finds you well.
I am writing to provide some assistance with the header configurations in XStore Builders, specifically within the Header Builder section.

Currently, you have multiple headers set up, including a distinct one for the front page. Should you decide that the overlap feature on the Home page is unnecessary, you can easily modify the settings to utilize a single header across the entire site.

We’ve changed the settings to https://prnt.sc/p1ChIkP-n_ee https://prnt.sc/DBoi8dJKmLCh Please clear cache and check the result.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best regards,
The 8Theme Team

#400060 Copied

Abhimanyu

Participant

June 22, 2024 at 07:16

the issue of image getting cut from top and right when i zoom to 80 or 100 is still persisting. it isnt adjusting itself.

screenshot attached

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#400911 Copied

Rose Tyler

Support staff

June 22, 2024 at 09:54

Dear Abhimanyu,

Currently “Cover” is selected for the image background – https://prnt.sc/uRRYn_eJ5Gz_ and the result you get is predefined by this, please read about other available options https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
This situation is independent of our theme, and settings will work the same with any theme you activate.

Best regards,
The 8Theme Team

#400942 Copied

Abhimanyu

Participant

June 22, 2024 at 10:37

So what setting do you suggest i should choose to avoid the cutting of images when zooming in or out?

Also what dimension of images should i create for this feature homepage image

#400951 Copied

Rose Tyler

Support staff

June 22, 2024 at 12:57

Dear Abhimanyu,

We suggest that you utilize an image editor to modify the image by adding unnecessary spaces to enhance its appearance when zoomed in. Alternatively, you may choose the “Contain” option available at https://prnt.sc/yUfOySWQpiED to view how to properly enlarge the image for optimal results.

One of the biggest concerns when using a full-screen background image is its size. Not only does it need to be the proper dimensions, but you must also pay attention to proportions, resolution, and file size.
The best website background image size is 1920 x 1080 pixels, according to Malama Online Marketing, and the ideal ratio is 16:9. The dpi (dots per inch) should be at least 72, yet you still want to keep the file size as small as possible to minimize site load times.
This might seem specific, but using the incorrect image size can lead to pixilation, distortion, stretching, and other viewing issues.

Best regards,
The 8Theme Team

#400979 Copied

Abhimanyu

Participant

June 22, 2024 at 13:15

thanx alotttt
this is helpful.
Any idea why the menu acts funny when i zoom in or zoom out?(screenshot attached)

Files is visible for topic creator and
support staff only.

#400985 Copied

Rose Tyler

Support staff

June 22, 2024 at 15:37

Dear Abhimanyu,

Thank you for reaching out to us with your concern.

1/ We recommend that you disable all third-party plugins that are not included with XStore
(https://www.8theme.com/documentation/xstore/plugins/included-plugins/). After doing so, please clear your browser’s cache and check again. It is possible that one of these additional plugins is causing the issue.

2/ Update the theme and plugins https://www.8theme.com/documentation/xstore/theme-installation/theme-update/ https://www.8theme.com/documentation/xstore/plugins/plugins-update/ , clear cache and check the result.

Best regards,
The 8Theme Team

#401013 Copied
Tagged: fix overlapping woocommerce banner, hero banner overlapping woocommerce, homepage overlapping issues woocommerce, menu overlap wordpress templates, woocommerce homepage layout problems
Viewing 10 results - 1 through 10 (of 10 total)