Return to previous page

My home page it blocks the menu I don’t know why

This topic has 6 replies, 3 voices, and was last updated 1 years, 3 months ago ago by Rose Tyler

mehdisaddiki10

Participant

August 31, 2023 at 08:33

I created an html css javascript code on my home page it blocks the menu I don’t know why

Copied Theme version: 9.1.13

5 Answers

Tony Rodriguez

Support staff

August 31, 2023 at 08:48

Hello, @mehdisaddiki10,

Thank you so much for purchasing our theme and contacting our support center.

Could you kindly specify which code you are referring to and where it has been added? We would greatly appreciate it if you could provide us with a screenshot and describe your issue in detail for better understanding.

And it blocks the menu

Please record a video of the problem for a better understanding. Upload it on a filesharing service, for example – https://wetransfer.com/ , and provide us with URL.

Also, create temporary wp-admin access, so we can check your settings.

Best Regards,
8Theme’s Team.

Copied

mehdisaddiki10

Participant

August 31, 2023 at 09:02

this code i add

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
      crossorigin="anonymous"
    />
    <style>
      video {
        pointer-events: none;
      }

      .video-item {
        position: relative;
        overflow: hidden;
      }

      .video-option {
        position: absolute;
        bottom: 10px;
        cursor: pointer;
        color: white;
        padding: 5px;
      }

      video::-webkit-media-controls-timeline {
        display: none;
      }

      video::-webkit-media-controls-time-remaining-display {
        display: none;
      }

      video::-webkit-media-controls-fullscreen-button {
        display: none;
      }

      video::-webkit-media-controls-enclosure {
        display: none;
      }
      .video-fill {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="video-list">
      <div
        class="video-item overflow-hidden"
        style="height: 100vh"
        data-src="/wp-content/uploads/2023/08/1.mp4"
      >
        <video class="vw-100" controls muted autoplay loop>
          <source
            src="/wp-content/uploads/2023/08/1.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
        <div class="video-option w-100">
          <div class="d-flex justify-content-between align-items-end px-3">
            <div class="play-pause"><i class="fas fa-pause"></i></div>
            <div>
              <p class="fs-4 fw-normal text-center">Me, Myself and SUGA 
" Wholly or Whole me"

              
            </div>
            <div class="mute-unmute"><i class="fas fa-volume-xmark"></i></div>
          </div>
        </div>
      </div>

      <div
        class="video-item overflow-hidden"
        style="height: 100vh"
        data-src="/wp-content/uploads/2023/08/2.mp4"
      >
        <video class="vw-100" controls muted autoplay loop>
          <source
            src="/wp-content/uploads/2023/08/2.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
        <div class="video-option w-100">
          <div class="d-flex justify-content-between align-items-end px-3">
            <div class="play-pause"><i class="fas fa-pause"></i></div>
            <div>
              <p class="fs-4 fw-normal text-center">HERE'S TO 2024, HERE'S TO YOU

              
              
            </div>
            <div class="mute-unmute"><i class="fas fa-volume-xmark"></i></div>
          </div>
        </div>
      </div>
      <div
        class="video-item overflow-hidden"
        style="height: 100vh"
        data-src="/wp-content/uploads/2023/08/3.mp4"
      >
        <video class="vw-100" controls muted autoplay loop>
          <source
            src="/wp-content/uploads/2023/08/3.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
        <div class="video-option w-100">
          <div class="d-flex justify-content-between align-items-end px-3">
            <div class="play-pause"><i class="fas fa-pause"></i></div>
            <div>
              <p class="fs-4 fw-normal text-center">This is only the beginning, THE BEST YET TO COME

            
            </div>
            <div class="mute-unmute"><i class="fas fa-volume-xmark"></i></div>
          </div>
        </div>
      </div>
      <div
        class="video-item overflow-hidden"
        style="height: 100vh"
        data-src="/wp-content/uploads/2023/08/4.mp4"
      >
        <video class="vw-100" controls muted autoplay loop>
          <source
            src="/wp-content/uploads/2023/08/4.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
        <div class="video-option w-100">
          <div class="d-flex justify-content-between align-items-end px-3">
            <div class="play-pause"><i class="fas fa-pause"></i></div>
            <div>
              <p class="fs-4 fw-normal text-center">You're the star that turns ordinaries into extraordinaries

              
            </div>
            <div class="mute-unmute"><i class="fas fa-volume-xmark"></i></div>
          </div>
        </div>
      </div>
      <div
        class="video-item overflow-hidden"
        style="height: 100vh"
        data-src="/wp-content/uploads/2023/08/5.mp4"
      >
        <video class="vw-100" controls muted autoplay loop>
          <source
            src="/wp-content/uploads/2023/08/5.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
        <div class="video-option w-100">
          <div class="d-flex justify-content-between align-items-end px-3">
            <div class="play-pause"><i class="fas fa-pause"></i></div>
            <div>
              <p class="fs-4 fw-normal text-center">Bring a friend join the crowd, whoever wanna come along

           
            </div>
            <div class="mute-unmute"><i class="fas fa-volume-xmark"></i></div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        function applyStyles() {
          $(".video-item").each(function () {
            var parent = $(this);
            var video = parent.find("video");

            if (parent.width() > parent.height()) {
              video.addClass("video-fill vw-100").removeClass("vh-100");
            } else {
              video.addClass("video-fill vh-100").removeClass("vw-100");
            }
          });
        }

        // Apply styles on page load
        applyStyles();

        // Apply styles when window is resized
        $(window).on("resize", function () {
          applyStyles();
        });

        const videoItems = document.querySelectorAll(".video-item");
        const muteUnmuteAllButton = $("#mute-unmute-all");

        const playVideoOnScroll = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const video = entry.target.querySelector("video");
              video.play();
            } else {
              const video = entry.target.querySelector("video");
              video.pause();
            }
          });
        };

        const observer = new IntersectionObserver(playVideoOnScroll, {
          root: null,
          threshold: 0.5, // Adjust the threshold as needed
        });

        videoItems.forEach((item) => {
          observer.observe(item);
        });

        $(".video-item").each(function () {
          var video = $(this).find("video")[0];
          var playPauseButton = $(this).find(".play-pause");
          var muteUnmuteButton = $(this).find(".mute-unmute");

          playPauseButton.on("click", function () {
            if (video.paused) {
              video.play();
              playPauseButton.html('<i class="fas fa-pause"></i>');
            } else {
              video.pause();
              playPauseButton.html('<i class="fas fa-play"></i>');
            }
          });

          muteUnmuteButton.on("click", function () {
            if (video.muted) {
              $(".video-item").each(function () {
                var video_ = $(this).find("video")[0];
                var muteUnmuteButton_ = $(this).find(".mute-unmute");

                muteUnmuteButton_.html('<i class="fas fa-volume-xmark"></i>');
                video_.muted = true;
              });
              video.muted = false;
              muteUnmuteButton.html('<i class="fas fa-volume-up"></i>');
            } else {
              video.muted = true;
              muteUnmuteButton.html('<i class="fas fa-volume-xmark"></i>');
            }
          });
        });

        muteUnmuteAllButton.on("click", function () {
          const allVideosMuted = $(".video-item video").prop("muted");
          $(".video-item video").prop("muted", !allVideosMuted);
          $(".mute-unmute i").toggleClass("fa-volume-xmark fa-volume-up");
        });

       
      });
    </script>
  </body>
</html>

Block Menu in mobile Phone version

Copied

Rose Tyler

Support staff

August 31, 2023 at 12:09

Hello, @mehdisaddiki10,

We appreciate your prompt response. However, your query remains somewhat ambiguous to us. We kindly request you to provide some screenshots or a video to help us better comprehend your request or the desired outcome.

Please be informed that we do not undertake responsibility for custom coding, and any additional customization falls outside the purview of our basic support.

Best Regards,
8Theme’s Team.

Copied

mehdisaddiki10

Participant

August 31, 2023 at 14:53

https://youtu.be/m01zTAR-UUQ?si=-F0HWgSL1VSfoito

Copied

Rose Tyler

Support staff

September 1, 2023 at 14:14

Hello, @mehdisaddiki10,

Thank you for your video.

We have noticed that you have successfully activated the AMP version on your size for mobiles. Consequently, the menu is now functioning optimally for mobiles.

We highly recommend the continued use of AMP. For more information on this, kindly refer to our article on General Info AMP at https://www.8theme.com/documentation/xstore/amp-plugin/general-info-amp/.

We regret to inform you that we are unable to provide assistance for issues arising from third-party code. Our support services are limited to our default code only.

Thank you for your understanding.

Best Regards,
8Theme’s Team.

Copied

Tagged: fix woocommerce menu block, menu block problem, my home page issues, woocommerce troubleshooting, wordpress home page fixes, wordpress woocommerce themes
Viewing 6 results - 1 through 6 (of 6 total)