How to leave the menu with a "dropdown" option

Asked

Viewed 39 times

1

I put in the menu bar an option with "dropdown", only when I click, it gets bugged on the site (goes to the bottom line)

<!DOCTYPE HTML>

<html>

<head>
    <title>Brown Odontologia</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--- zoom desativado para o usuario -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!----fonts google------->
    <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">
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
	.bs-example{
    	margin: 50px;
    }
</style>
<script>
    $(document).ready(function(){
        $(".dropdown-toggle").dropdown();
    });  
</script>
</head>
<body class="container">
    <!--------------------------------------------------------- Menu ------------------------------------------------------------>

    <div class="row justify-content-md-center">
        <header class="w3-panel w3-center w3-opacity" style="padding:1px 5px">
            <h1 class="w3-xlarge">BROWN ODONTOLOGIA</h1>
            <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
            <h6>SEU SORRISO É NOSSA MISSÃO</h6>
            <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
            <a href="#menu" class="w3-bar-item w3-button">Quem Somos ?</a>
            <a href="#escolher" class="w3-bar-item w3-button">Por que nos escolher ?</a>
            <a href="#especia" class="w3-bar-item w3-button">Especialidades</a>
            <a href="#chegar" class="w3-bar-item w3-button">Como chegar ?</a>

    <div class="btn-group">
        <button type="button" class="btn btn-primary-center dropdown-toggle" data-toggle="dropdown">Contatos</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">WhatsApp</a>
            <a href="#" class="dropdown-item">Telefone</a>
        </div>
    </div>

    
     
        </header>
    </div>

menu dropdown alignment

1 answer

0


Caique you’re having a Frameworks conflict... you’re indexing Bootstrap 3 and the 4 at the same time! If you do not index Bootstrap 3 the menu works normally. Also, you are indexing Bootstrap 4 2x as well as Fontawesome tb 2x.

inserir a descrição da imagem aqui

In this answer I just removed BS3, as it makes no sense to use both at the same time, as they share several classes with equal names but different styles. Until pq vc is not indexing the JS of version 3 only the JS of version 4, so it is virtually no problem to remove . css from BS3.

<!DOCTYPE HTML>

<html>

<head>
  <title>Brown Odontologia</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--- zoom desativado para o usuario -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!----fonts google------->
  <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">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->

  <style>
    .bs-example {
      margin: 50px;
    }
  </style>

</head>

<body class="container">
  <!--------------------------------------------------------- Menu ------------------------------------------------------------>

  <div class="row justify-content-md-center">
    <header class="w3-panel w3-center w3-opacity" style="padding:1px 5px">
      <h1 class="w3-xlarge">BROWN ODONTOLOGIA</h1>
      <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
      <h6>SEU SORRISO É NOSSA MISSÃO</h6>
      <hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
      <a href="#menu" class="w3-bar-item w3-button">Quem Somos ?</a>
      <a href="#escolher" class="w3-bar-item w3-button">Por que nos escolher ?</a>
      <a href="#especia" class="w3-bar-item w3-button">Especialidades</a>
      <a href="#chegar" class="w3-bar-item w3-button">Como chegar ?</a>

      <div class="btn-group">
        <button type="button" class="btn btn-primary-center dropdown-toggle" data-toggle="dropdown">Contatos</button>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">WhatsApp</a>
          <a href="#" class="dropdown-item">Telefone</a>
        </div>
      </div>



    </header>
  </div>
  <script>
    $(document).ready(function () {
      $(".dropdown-toggle").dropdown();
    });
  </script>
</body>

</html>

  • vlws hugocsl as always helping us with your knowledge :D

  • @caiquesey

Browser other questions tagged menu dropdown alignment

You are not signed in. Login or sign up in order to post.