Menu alignment with the home page banner

Hello, @Mitul,

We are pleased to inform you that the reported issue has been successfully resolved. Our team diligently addressed the matter by utilizing Elementor to edit the Home page. Specifically, we focused on the banner background image column, where adjustments were made in the Advanced section to set the top margin of the banner.

Your satisfaction is of utmost importance to us, and we are committed to providing a seamless and efficient resolution process.

Please refer to the attached visual reference in the provided image link:https://imgur.com/a/mM96PYO

Kind Regards,
8theme team

Hello, @Mitul,

Thank you for using our theme and for contacting us.

Website speed depends on various factors that we do not control. What we can do is share the links that can help you with speed optimization: https://www.8theme.com/documentation/xstore/troubleshooting/how-to-speed-up-my-website/

Every additional plugin slows down the site a bit, so we would recommend you disable unrequired plugins.

We are writing to address the issue you have been experiencing with your website’s slow loading speed. After conducting a speed test on your website via GTmetrix, we have found that the performance is suboptimal. You may review the results at the following link:
https://gtmetrix.com/reports/obxgourmet.com/QQ8Aujmk/

We recommend that you review the suggestions provided by GTMetrix in the Top Issues list, accessible here:https://imgur.com/a/CZWtTa2

About your results on gtmetrix results:

-–Avoid an excessive DOM size – read these posts about DOM https://docs.wp-rocket.me/article/1412-avoid-an-excessive-dom-size
https://isotropic.co/avoid-an-excessive-dom-size-on-your-wordpress-website/
Edit your page and Product elements. It should reduce the DOM structure. Also, you may try to reduce the DOM results on the page by reducing the number of sections of the page/elements in the footer or header;

-Eliminate render-blocking resources: https://gtmetrix.com/eliminate-render-blocking-resources.html

-Avoid long main-thread tasks https://gtmetrix.com/avoid-long-main-thread-tasks.html

-Serve static assets with an efficient cache policy
https://gtmetrix.com/serve-static-assets-with-an-efficient-cache-policy.html

– Avoid enormous network payloads – https://gtmetrix.com/avoid-enormous-network-payloads.html

– Use a Content Delivery Network (CDN), it can give an equally fast web experience to your users across the globe. We use CDN on our demos;
For further guidance on how to improve your website’s speed, we invite you to review our theme documentation. The following links provide detailed information on this topic:

1. https://www.8theme.com/documentation/xstore/theme-installation/main-theme-options/
2. https://www.8theme.com/documentation/xstore/troubleshooting/how-to-improve-wp-rocket-settings-with-xstore/

Lazy load:Lazy loading is a technique used to optimize web page performance by delaying the loading of certain elements until they are actually needed. It’s commonly used for images and other media to improve page load times.

For a comprehensive understanding of the specific issues that may be affecting your website’s speed, we suggest conducting a website speed test with GTMetrix. This tool can provide you with actionable recommendations to further enhance your website’s performance.

We trust that you will find this information useful in improving your website’s performance.

Kind Regards,
8theme team

Hello, @Mitul,

We hope this message finds you well.

We would like to extend our sincere apologies for any inconvenience you may have experienced. We appreciate your effort in providing a video explanation to illustrate the issue at hand.

Upon reviewing the situation, we have determined that the problem you are encountering is not related to margins or padding within the site’s design. Instead, it is attributed to a phenomenon known as browser rendering, which is inherently dependent on the website’s loading speed.

To elaborate, when a website address is entered into a browser and the enter key is pressed, the browser sequentially processes the HTML, CSS, and subsequently any JavaScript or server-side scripts. The visual stuttering, or “jerking,” you have observed occurs during the transition from HTML to CSS rendering and until the page is fully loaded. While it is challenging to eliminate this effect entirely, it is possible to mitigate the delay by enhancing the website’s speed and utilizing a Content Delivery Network (CDN).

For a more in-depth understanding of this process, we recommend reading the following article: https://developer.chrome.com/blog/inside-browser-part3

We trust this explanation clarifies the situation, and we are hopeful for your understanding. Should you have any further questions or require additional assistance, please do not hesitate to reach out to us.

Warm regards,
The 8Theme Team

Dear Mitul,

We hope this message finds you well.

We have observed that the current configuration of your website utilizes the Content Delivery Network (CDN) to serve various assets, including scripts, styles, and images. This setup may result in longer loading times for these assets during the initial visit to your website.

To enhance the user experience and reduce the initial load time, we’ve implemented custom code to enable lazy loading for the first section of your website. This adjustment should significantly improve the loading efficiency for new visitors.

We kindly ask that you clear your website’s cache to ensure that these changes take effect. Once you have done so, please revisit your website to verify the improvements.

Should you require any further assistance or have any questions regarding this update, please do not hesitate to reach out.

Best regards,
The 8Theme Team

Hi @Mitul,

1. Make it aligned

To make the menu same height as the banner image, please add the following CSS under Theme Options > Theme Custom CSS > Global CSS:

ul#menu-gifts-for-all {
    padding: 37px 0;
}

2. Make it back to how it was so that i can see separate settings for menu and that banner

We’ve removed the lazyload setting from this section.

Can you please also tell us why your custom CSS codes are loading via these links? Can you disable it?

Best regards,
The 8Theme Team

Hi @Mitul,

We’ve added the custom CSS below under Theme Options > Theme Custom CSS > Global CSS:

ul#menu-gifts-for-all {
    padding: 37px 0;
}

And the menu & banner are same height now: https://prnt.sc/Oka8rOTc-A-G

I also did not understand what you mentioned
“Can you please also tell us why your custom CSS codes are loading via these links? Can you disable it?”

Thats completely gone out of my head. I believe, any of your support team might have updated and you are asking to me. I dont know what you are asking about.

We’re asking to check if you’re using any CDN services(or maybe a feature from your hosting provider). By default the CSS URL files would look like this: https://obxgour***.com/wp-content/themes/xstore/css/modules/layout/off-canvas.min.css

Loading the custom CSS via https://obxgour***.com/_jb_static/?xxx might be slow down the loading time.

Best regards,
The 8Theme Team

Hi @Mitul,

We’ve figured out that options are coming from Jetpack plugin. We’ve disabled those options and the website is loading normally now: https://www.awesomescreenshot.com/video/24177755?key=bd9b40d7f3b8b4246926aa3ccdcba200

Can you please clear the caches and check?

Thank you so much!

Hi @Mitul,

Please take a look at the Private Content area.

Best regards,
The 8Theme Team

Hi @Mitul,

You can also try with the W3 Total Cache plugin(it’s FREE) or WP-Rocket plugin(PAID).

For more information, please take a look at this article: https://www.8theme.com/documentation/xstore/troubleshooting/how-to-speed-up-my-website/

Best regards,
The 8Theme Team