Dlaczego nie działa mi przycisk po zwinięciu do wersji mobilnej HTML

pytanie zadane 21 marca 2020 w HTML i CSS przez Daim123 Użytkownik (530 p.)

Mam taki problem, że po zwinięciu navbara do wersji mobilej gdy pojawia się przycik to po kliknięciu w niego nie rozwija się menu.

<header>
        
        <nav class="navbar navbar-dark navbar-expand-md">
        
        <button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#mainmenu">
            <span class="navbar-toggler-icon"></span>
        </button>
            
            <div class="collapse navbar-collapse" id="mainmenu">
            
            <ul class="navbar-nav mr-auto ml-auto" >
                
                <li class="nav-item">
                    <a class="nav-link" href="#">MENU</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link" href="#">ŚNIADANIA</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link" href="#">IMPREZY PRYWATNE</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link" href="#">KONTAKT</a>
                </li>
             
            </ul>
            
            </div>
        
        </nav>

komentarz 21 marca 2020 przez jaca121212 Nałogowiec (40,760 p.)

Wstaw kod css bo z kodu html nic ci nie pomożemy.

komentarz 21 marca 2020 przez Daim123 Użytkownik (530 p.)

CSS


body
{
    margin:0;
    background-color: #F8F8FF;
    color: #efefef;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}

h1.logo
{
    font-size: 60px;
    font-weight: 700;
    color: #ddd;
    text-align: center;
    font-family: 'Dancing Script', cursive;
    margin-top: 50px;
    margin-bottom: 40px;
    
}

nav
{
    background-color: #000;
    text-align: center;
}


.photos
{
    text-align: center;
    padding: 0;
    
}


.categories
{
    text-align: center;
    padding 0;
    font-size: 15px;
}

.nagłówek
{
    font-family: 'Dancing Script', cursive;
    margin-top:35px;
}

h2
{
    font-family: 'Caveat', cursive;
    font-size: 25px;
}

#text
{
    background-color: #191d21;
}

komentarz 21 marca 2020 przez Daim123 Użytkownik (530 p.)

@jaca121212, ok już wstawione

komentarz 21 marca 2020 przez jaca121212 Nałogowiec (40,760 p.)

@Daim123, style dla buttona nie są podane. W JS/ Jquery leży problem z obsługą przycisku.

komentarz 21 marca 2020 przez Daim123 Użytkownik (530 p.)

Czyli co trzeba zrobić? Ponieważ ja działałem tak jak w odcinku kursu, w kodzie załączyłem



<!DOCTYPE HTML>
<html lang="pl">
<head>
   
   
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
   
   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
   
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="style.css"/>
   <link href="https://fonts.googleapis.com/css?family=Caveat|Dancing+Script|Open+Sans&display=swap" rel="stylesheet">

</head>
    









<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="js/bootsrap.min.js"></script>

1 odpowiedź

odpowiedź 21 marca 2020 przez jaca121212 Nałogowiec (40,760 p.)

Najlepiej wstaw całość kodu html CSS i JS. wtedy pomożemy.

komentarz 21 marca 2020 przez Daim123 Użytkownik (530 p.)


<!DOCTYPE HTML>
<html lang="pl">
<head>
   
   
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
   <title>Włoska Pizza</title>
   <meta name="description" content="Zobacz wszystko co powinieneś wiedzieć o pizzy"/>
   <meta name="keywords" content="pizza, włoska pizza, domowe wypieki, gdzie zjeść, restauracje, toruń, przepis na pizze, przepis, obiad"
   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
   
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="style.css"/>
   <link href="https://fonts.googleapis.com/css?family=Caveat|Dancing+Script|Open+Sans&display=swap" rel="stylesheet">

</head>
    
<body>
    <header>
        
        <nav class="navbar navbar-dark navbar-expand-md">
        
        <button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#mainmenu">
            <span class="navbar-toggler-icon"></span>
        </button>
            
            <div class="collapse navbar-collapse" id="mainmenu">
            
            <ul class="navbar-nav mr-auto ml-auto" >
                
                <li class="nav-item">
                    <a class="nav-link" href="#">MENU</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link" href="#">ŚNIADANIA</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link" href="#">IMPREZY PRYWATNE</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link" href="#">KONTAKT</a>
                </li>
             
            </ul>
            
            </div>
        
        </nav>
    
    </header>
    
    <main>
        
        <article>
                
                <section class="photos">
                    
                    <div class="container">
                        <div class="row">
                            
                                
                                <div class="col-sm-6">
                                     <a href="#"><img src="img/PIECYK.jpg" class="img-fluid"></a>
                                </div>
                                
                                <div class="col-sm-6">
                                    <a href="#"><img src="img/IMG_9707.JPG" class="img-fluid"></a>
                                </div>
                        
                        
                         </div>
                    </div>
                 </section>
    
                <section id="text">
                   <div class="container">
                       <div class="row">
                           <div class="categories">
                               <header>
                               <h1 class="nagłówek">Restauracja MUTTI</h1></br>
                               
                               <h2>Południowe Włochy na wyciągnięcie ręki.</h2></br>
                               
                               <p>Serdecznie zapraszamy do nowo otwartej restauracji Mutti położonej w sercu toruńskiej starówki.</p></br>
                               <p>Nasza Restauracja specjalnie dla Państwa codziennie wypieka chleb według własnej receptury i tradycyjnego sposobu piekarniczego. Przystawki oraz sałatki podawane są ze świeżym chlebem prosto z pieca. Polecamy chrupiącą bruschette serwowaną na włoskim białym chlebie ciabatta.</p>
                               
                               <p>Karta win Restauracji MUTTI zadowoli najbardziej wymagających miłośników tego wspaniałego trunku. Odnajdziecie w niej Państwo specjały na każdą okazję a nasza obsługa towarzyszyć będzie w podróży po świecie win tak aby była ona niezapomnianym doznaniem.</p>
                               
                               <p>Naszymi specjalnościami są również pasty do których makaron wykonujemy ręcznie na miejscu!</p>
                               
                               <p>Znajdujemy się w samym centrum przepięknego piernikami pachnącego Torunia,</p>
                               <p>przy ulicy Szeroka 35</p>
                               
                               <p>Do zobaczenia!</p>
                               </header>
                           
                           </div>
                        </div>
                    </div>
                </section>
                
                <section>
                   <div class="container">
                </div>
                </section>
    
        </article>
    
    </main>
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="js/bootsrap.min.js"></script>
</body>

</html>

Ok to jest html, css wstawiłem.

komentarz 22 marca 2020 przez jaca121212 Nałogowiec (40,760 p.)

W ten sposób to rozwiązałem tutaj

komentarz 22 marca 2020 przez Daim123 Użytkownik (530 p.)

A w którym miejscu załączyć Twój skrypt Js żeby to działało?

komentarz 22 marca 2020 przez jaca121212 Nałogowiec (40,760 p.)

wklej w sekcji body a najlepiej przed zamknięciem body


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/bootsrap.min.js"></script>
<script>
$( document ).ready(function() {
  $("button").click(function(){
$("#mainmenu").toggle();
});
});
</script>
</body>