Навигация не открывается в мобильной версии вебсайта

78
14 апреля 2021, 13:00

html { 
  scroll-behavior: smooth; 
} 
 
.navbar { 
  z-index: 3; 
} 
 
header { 
  position: relative; 
  background-color: black; 
  height: 75vh; 
  min-height: 25rem; 
  width: 100%; 
  overflow: hidden; 
  display: flex; 
  align-items: center; 
} 
 
header video { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: 0; 
  -ms-transform: translateX(-50%) translateY(-50%); 
  -moz-transform: translateX(-50%) translateY(-50%); 
  -webkit-transform: translateX(-50%) translateY(-50%); 
  transform: translateX(-50%) translateY(-50%); 
} 
 
header .overlay { 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%; 
  background-color: blue; 
  opacity: 0.5; 
  z-index: 1; 
} 
 
form { 
  z-index: 2; 
  justify-content: center; 
} 
 
 
/*image is taken from google */ 
 
@media (pointer: coarse) and (hover: none) { 
  header { 
    background: url('media/vr_bed.jpg') black no-repeat center center scroll; 
  } 
  header video { 
    display: none; 
  } 
}
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
  <link rel="stylesheet" href="style.css"> 
 
  <head> 
 
    <!-- Navigation bar --> 
    <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
      <!--Butopea logo taken from the website--> 
      <a class="navbar-brand" href="#"><img src="https://butopea.com/image/catalog/logo/butopea_circle.png" alt="Butopêa HU" height="40px" width="40px" style="height: 40px;width: 40px;"></a> 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
                <span class="navbar-toggler-icon"></span> 
            </button> 
      <div class="collapse navbar-collapse float-right" id="navbarNav"> 
        <ul class="navbar-nav"> 
          <li class="nav-item"> 
            <a class="nav-link" href="#Signup">Become a tester</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="#Details">Details</a> 
          </li> 
        </ul> 
      </div> 
    </nav> 
 
    <body> 
      <header id="Signup"> 
 
        </div> 
      </header> 
 
 
      <!-- Javascript libraries and frameworks --> 
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
      <script src="https://kit.fontawesome.com/b4b26d4271.js"></script> 
      <script src="main.js"></script> 
 
</html>

По какой-то причине навигация не открывается в мобильной версии вебсайта. Не могу понять, какие параметры мешают ему открыться?

HTML:

  <!-- Navigation bar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!--Butopea logo taken from the website-->
            <a class="navbar-brand" href="#"><img src="https://butopea.com/image/catalog/logo/butopea_circle.png" alt="Butopêa HU" height="40px" width="40px" style="height: 40px;width: 40px;"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse float-right" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#Signup">Become a tester</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Details">Details</a>
                    </li>
                </ul>
            </div>
        </nav>
        <body>
            <header id="Signup">
                <!-- Email part -->
                <form action="" id="post-data" class="justify-content-center col">
                    <div class="container form-group text-white text-center">
                        <div class="form-group">
                            <h1 class="title text-center"> <strong>New Virtual Software</strong> </br> Design Your Room </br> Your Own Way</h1>
                        </div>
                        <div>
                            <input type="email" id="email" class="form-control form-group form-control-lg text-center" placeholder="Enter your email...">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-lg btn-primary form-group">Become a tester</button>
                        </div>
                    </div>
                </form>
                <div class="overlay">
                    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                        <source src="media/vr.mp4" type="video/mp4">
                    </video>
                </div>
            </header>

CSS:

html {
     scroll-behavior: smooth;
}
 .navbar{
     z-index: 3;
}
 header {
     position: relative;
     background-color: black;
     height: 75vh;
     min-height: 25rem;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
}
 header video {
     position:absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: 0;
     -ms-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
}
 header .overlay {
     position:absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: blue;
     opacity: 0.5;
     z-index: 1;
}
 form {
     z-index:2;
     justify-content: center;
}
/*image is taken from google */
 @media (pointer: coarse) and (hover: none) {
     header {
         background: url('media/vr_bed.jpg') black no-repeat center center scroll;
    }
     header video {
         display: none;
    }
}
Answer 1

Подгрузите скрипты Bootstrap. С ними всё работает корректно.

https://jsfiddle.net/w4b2kpm5/

// when the button pressed accepts the data with proper formating 
document.getElementById('post-data').addEventListener('submit', newPost) 
 
function newPost(){ 
  let email = document.querySelector('#email').value; 
  //convert it to a JSON script and send to the back end 
  fetch('http://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ email: email }) }) 
  .then(response => response.json()) 
  .then(response => console.log(email)); 
}
html { 
     scroll-behavior: smooth; 
} 
 .navbar{ 
     z-index: 3; 
} 
 header { 
     position: relative; 
     background-color: black; 
     height: 75vh; 
     min-height: 25rem; 
     width: 100%; 
     overflow: hidden; 
     display: flex; 
     align-items: center; 
} 
 header video { 
     position:absolute; 
     top: 50%; 
     left: 50%; 
     min-width: 100%; 
     min-height: 100%; 
     width: auto; 
     height: auto; 
     z-index: 0; 
     -ms-transform: translateX(-50%) translateY(-50%); 
     -moz-transform: translateX(-50%) translateY(-50%); 
     -webkit-transform: translateX(-50%) translateY(-50%); 
     transform: translateX(-50%) translateY(-50%); 
} 
 header .overlay { 
     position:absolute; 
     top: 0; 
     left: 0; 
     height: 100%; 
     width: 100%; 
     background-color: blue; 
     opacity: 0.5; 
     z-index: 1; 
} 
 form { 
     z-index:2; 
     justify-content: center; 
} 
/*image is taken from google */ 
 @media (pointer: coarse) and (hover: none) { 
     header { 
         background: url('media/vr_bed.jpg') black no-repeat center center scroll; 
    } 
     header video { 
         display: none; 
    } 
}
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
    <link rel="stylesheet" href="style.css"> 
 
    <head> 
 
        <!-- Navigation bar --> 
        <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
            <!--Butopea logo taken from the website--> 
            <a class="navbar-brand" href="#"><img src="https://butopea.com/image/catalog/logo/butopea_circle.png" alt="Butopêa HU" height="40px" width="40px" style="height: 40px;width: 40px;"></a> 
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
                <span class="navbar-toggler-icon"></span> 
            </button> 
            <div class="collapse navbar-collapse float-right" id="navbarNav"> 
                <ul class="navbar-nav"> 
                    <li class="nav-item"> 
                        <a class="nav-link" href="#Signup">Become a tester</a> 
                    </li> 
                    <li class="nav-item"> 
                        <a class="nav-link" href="#Details">Details</a> 
                    </li> 
                </ul> 
            </div> 
        </nav> 
 
        <body> 
            <header id="Signup"> 
                <!-- Email part --> 
                <form action="" id="post-data" class="justify-content-center col"> 
                    <div class="container form-group text-white text-center"> 
                        <div class="form-group"> 
                            <h1 class="title text-center"> <strong>New Virtual Software</strong> </br> Design Your Room </br> Your Own Way</h1> 
                        </div> 
                        <div> 
                            <input type="email" id="email" class="form-control form-group form-control-lg text-center" placeholder="Enter your email..."> 
                        </div> 
                        <div> 
                            <button type="submit" class="btn btn-lg btn-primary form-group">Become a tester</button> 
                        </div> 
                    </div> 
                </form> 
                <div class="overlay"> 
                    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> 
                        <source src="media/vr.mp4" type="video/mp4"> 
                    </video> 
                </div> 
            </header> 
 
            <!-- Expectations part(divided with the help of columns) --> 
            <section id="Details" class="page-section m-5" id="services"> 
                <div class="container text-dark"> 
                    <h2 class="text-center mt-0">What to expect</h2> 
                    <hr class="divider "> 
                    <div class="container"> 
                        <div class="row text-center"> 
                            <div class="col-md-4"> 
                                <span class="fa-stack fa-6x"> 
                          <i class="fa fa-square fa-stack-2x text-primary"></i> 
                          <i class="fa fa-pencil-ruler fa-stack-1x fa-inverse"></i> 
                      </span> 
                                <h4 class="service-heading">New way of design</h4> 
                                <p class="text-muted">We will show you how to design your room in a new ways</p> 
                            </div> 
                            <div class="col-md-4"> 
                                <span class="fa-stack fa-6x"> 
                          <i class="fa fa-square fa-stack-2x text-primary"></i> 
                          <i class="fa fa-building fa-stack-1x fa-inverse"></i> 
                      </span> 
                                <h4 class="service-heading">Better Design</h4> 
                                <p class="text-muted"> With the help of VR you will look like no other room</p> 
                            </div> 
                            <div class="col-md-4"> 
                                <span class="fa-stack fa-6x"> 
                          <i class="fa fa-square fa-stack-2x text-primary"></i> 
                          <i class="fa fa-star fa-stack-1x fa-inverse"></i> 
                      </span> 
                                <h4 class="service-heading">Be first to try it!</h4> 
                                <p class="text-muted">This is not available anywere else</p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
                </div> 
                </div> 
            </section> 
        </body> 
 
        <!-- Javascript libraries and frameworks --> 
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
        <script src="https://kit.fontawesome.com/b4b26d4271.js"></script> 
        <script src="main.js"></script> 
 
</html>

READ ALSO
Как изменять класс ссылки в Bootstrap &lt;navbar&gt; при переключении страниц через Angular router?
HTML

Как изменять класс ссылки в Bootstrap <navbar> при переключении страниц через Angular router?

Есть навбар в appcomponent

 110
Ошибка &ldquo;This site can’t be reached localhost refused to connect&rdquo;
c#

Ошибка “This site can’t be reached localhost refused to connect”

У меня есть солюшн с несколькими веб приложениями (aspnet mvc4) и библиотеками класов

 103
Как объявить переменную для хранения результата GroupBy() сделанного в EF Core вне текущего класса?
c#

Как объявить переменную для хранения результата GroupBy() сделанного в EF Core вне текущего класса?

EF Core - есть выборка из базы:

 150
начал учить С# и задался вопрос где лучше? [дубликат]
c#

начал учить С# и задался вопрос где лучше? [дубликат]

Всем привет,вот буквально 2-3 дня назад сел за изучение С# и появился встречный вопрос: где учить его? В книгах,либо в видео? Если в книгах,то...

 77