NavBar Dropdown Not Working

Report · Sep 22, 2021

Hello:

So im using bootstrap in Dreamweaver with the Navbar fixed to top and my dropdown menu isnt working at all in Live view or Real time preview I Believe I have everything linked as far as my Css and Javascript files and was wondering if anyone cpould help me fix this issue.

Thank You,

Cameron

<html lang="en">
  <head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hemp Tarot</title>
    <!-- Bootstrap -->
	<!-- <link href="css/bootstrap-4.3.1.css" rel="stylesheet"> -->
	<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
	<link href="css/main.css" rel="stylesheet" type="text/css">
	<style type="text/css">
@media screen{
}
    </style>
<meta name="description" content="Hemp Tarot is a combination of the mystical art of Tarot and the energy that comes from the power of THC and CBD. Grow with us on your lifes journey !">
</head>
	
  <body > 
  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
	 <div class="container"> <a class="navbar-brand" href="index.html"><img src="images/logo word.png" width="113" height="49" alt="Hemp Tarot Logo"/></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item dropdown">
		 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> HOME</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> 
			  <a class="dropdown-item" href="#">TAROT CARDS</a> 
			  <div class="dropdown-divider"></div>
			  <a class="dropdown-item" href="#">STORE</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">ABOUT US</a>
			</div>
        </li>
		  <ul class="navbar-nav navbar-right"> 
		 <li class="nav-item"> <a class="nav-link" href="#">CONTACT US</a> </li>
		 <li class="nav-item"> <a class="nav-link" href="#">CHECKOUT</a> </li>
		</ul>
      </ul>
</div>
   </div>
  </nav>

Screen Shot 2021-09-22 at 9.47.14 PM.png

Report · Sep 22, 2021

No problem using this code, which is the same as yours, but with jQuery added:

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="fontawesome4/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />

    <script src="js/jquery-3.5.1.slim.min.js"></script>
</head>

<body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
        <div class="container"> <a class="navbar-brand" href="index.html"><img src="images/logo word.png" width="113" height="49" alt="Hemp Tarot Logo" /></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent1">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> HOME</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                            <a class="dropdown-item" href="#">TAROT CARDS</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">STORE</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">ABOUT US</a>
                        </div>
                    </li>
                    <ul class="navbar-nav navbar-right">
                        <li class="nav-item"> <a class="nav-link" href="#">CONTACT US</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">CHECKOUT</a> </li>
                    </ul>
                </ul>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>

</html>

Wappler, the only real Dreamweaver alternative.

Report · Sep 23, 2021

To further on what Ben said, you have only shown us a snippet of your code so it is possible you are missing the jquery at the bottom. Also comparing your example to the Bootstrap fixed top example: https://getbootstrap.com/docs/4.0/examples/navbar-fixed/ , they also added CSS to the body that I do not see in your snippet:

body {
min-height: 75rem;
padding-top: 4.5rem;
}

Report · Sep 23, 2021

Where is the rest of your code with links to Bootstrap.js and jQuery.js?

Without the JavaScript files, your navigation can't DO anything.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 23, 2021

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hemp Tarot</title>
    <!-- Bootstrap -->
	<!-- <link href="css/bootstrap-4.3.1.css" rel="stylesheet"> -->
	<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
	<link href="css/main.css" rel="stylesheet" type="text/css">
	<style type="text/css">
@media screen{
}
    </style>
<meta name="description" content="Hemp Tarot is a combination of the mystical art of Tarot and the energy that comes from the power of THC and CBD. Grow with us on your lifes journey !">
   <script src="js/jquery-3.5.1.slim.min.js"></script>
</head>
	
  <body > 
  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
	 <div class="container"> <a class="navbar-brand" href="index.html"><img src="images/logo word.png" width="113" height="49" alt="Hemp Tarot Logo"/></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item dropdown">
		 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> HOME</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> 
			  <a class="dropdown-item" href="#">TAROT CARDS</a> 
			  <div class="dropdown-divider"></div>
			  <a class="dropdown-item" href="#">STORE</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">ABOUT US</a>
			</div>
        </li>
		  <ul class="navbar-nav navbar-right"> 
		 <li class="nav-item"> <a class="nav-link" href="#">CONTACT US</a> </li>
		 <li class="nav-item"> <a class="nav-link" href="#">CHECKOUT</a> </li>
		</ul>
      </ul>
</div>
   </div>
  </nav>
<!-- body code goes here -->

<div class="container-fluid band-hero">
  <div class="container">
    <div class="row">
      <div class="col-xl-6">
        <div class="row">
          <div class="col-xl-12 text-center">
            <h1>HEMP TAROT</h1>
          </div>
          <div class="col-xl-12 text-center">
            <p class="text-first-h1">Find Your Seeds, Grow Within</p>
          </div>
          <div class="col-xl-12 text-center">
          
          </div>
        </div>
      </div>
      <div class="offset-xl-0 col-xl-6"><img src="images/Logo.png" alt="Hemp Tarot Icon" width="200" height="200" class="mx-auto d-block img-fluid"/>
	<div class="position-relative"><div class="position-absolute top-0 start-0 translate-middle"></div>
		</div>
    </div>
  </div>
  </div>
  </div>
<div class="container-fluid band-tarot">
  <div class="container">
    <div class="row">
      <div class="col-xl-6">
        <div class="row">
          <div class="col-xl-12">
            <div class="row">
              <div class="col-xl-2">blank</div>
              <div class="col-xl-2">blank</div>
              <div class="col-xl-2">blank</div>
              <div class="col-xl-2">fool</div>
              <div class="col-xl-2">blank</div>
              <div class="col-xl-1">blank</div>
              <div class="col-xl-1 text-center">blank</div>
            </div>
          </div>
          <div class="col-xl-12">
			 <div class="row">
              <div class="col-xl-2">magician</div>
              <div class="col-xl-2">priestess</div>
              <div class="col-xl-2">empress</div>
              <div class="col-xl-2">emporer</div>
              <div class="col-xl-2">heirophant</div>
              <div class="col-xl-1">lovers</div>
              <div class="col-xl-1 text-center">chariot</div>
            </div>
		  </div>
          <div class="col-xl-12">
			 <div class="row">
              <div class="col-xl-2">strength</div>
              <div class="col-xl-2">hermit</div>
              <div class="col-xl-2">wheel of fortune</div>
              <div class="col-xl-2">justice</div>
              <div class="col-xl-2">hang man</div>
              <div class="col-xl-1">death</div>
              <div class="col-xl-1 text-center">temperance</div>
            </div>
		  </div>
          <div class="col-xl-12">
			 <div class="row">
              <div class="col-xl-2">devil</div>
              <div class="col-xl-2">tower</div>
              <div class="col-xl-2">star</div>
              <div class="col-xl-2">moon</div>
              <div class="col-xl-2">sun</div>
              <div class="col-xl-1">justice</div>
              <div class="col-xl-1 text-center">world</div>
            </div>
		  </div>
        </div>
      </div>
      <div class="col-xl-6">
        <div class="row">
          <div class="col-xl-11 offset-xl-1 text-center">
            <h2 class="text-h2-title">TAROT</h2>
            <p class="text-tarot">Tarot is a tool used in divination to see into the past, present and future as well as the internal and external of someones being. Tarot gives a guidance through life and an insight into its many surprises. Move the mouse over each card to reveal what the card is and what the card means below.<br>
            Find Your Seeds, Grow Within</p>
			  
		  </div>
          <div class="col-xl-11 offset-xl-1 text-center">
			 <h2 class="text-h2-title">CARD TITLE</h2>
            <p class="text-card">Tarot is a tool used in divination to see into the past present and future as well as the internal and external of someones being. Tarot gives a guidance through life and an insight into its many surprises. Find your seeds now, grow within</p> 
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

<div class="container-fluid band-store">
  </div>

<div class="container-fluid band-about">
  <div class="container">
    <div class="row">
      <div class="offset-xl-0 col-xl-2">
      <img src="images/Logo.png" alt="Hemp Tarot Icon" width="200" height="200" class="mx-auto d-block img-fluid"/>
	  </div>
      <div class=" offset-xl-0 col-xl-4">
        <div class="row">
          <div class="col-xl-11 offset-xl-1">
            <h2 class="text-h2-title">Contact</h2>
			 
		  </div>
          <div class="col-xl-11 offset-xl-1">
            <div class="row">
              <div class="col-xl-3 offset-xl-0">Icon</div>
              <div class="offset-xl-1 col-xl-8">
                <p class="text-phone">(928) 580-2373</p>
              </div>
            </div>
          </div>
          <div class="col-xl-11 offset-xl-1">
            <div class="row">
              <div class="offset-xl-0 col-xl-3">Icon</div>
              <div class="offset-xl-1 col-xl-8 text-email">
				  <p><a href="mailto:hemp8tarot@gmail.com" class="social-link">hemp8tarot@gmail.com</a></p>
              </div>
            </div>
          </div>
          <div class="col-xl-11 offset-xl-1">
            <div class="row">
              <div class="col-xl-3">Join</div>
              <div class="offset-xl-1 col-xl-8 text-center">
                <p class="text-join">Join Our Email List Today for Updates and info!</p>
              </div>
            </div>
          </div>
          <div class="offset-xl-1 col-xl-11">
            <div class="row">
              <div class="col-xl-3">
			    <img src="images/facebook logo.png" alt="Facebook Icon" width="200" height="200" class="mx-auto d-block img-fluid"/> </div>
              <div class="col-xl-3">
			    <img src="images/instagram.png" alt="Instagram Icon" width="200" height="200" class=" mx-auto d-block img-fluid"/> </div>
              <div class="col-xl-3"><img src="images/youtube.png" alt="Youtube Icon" width="200" height="200" class="mx-auto d-block img-fluid"/> 
			  </div>
              <div class="col-xl-3">
			    <img src="images/tiktok.png" alt="TikTok Icon" width="200" height="200" class="mx-auto d-block img-fluid"/> </div>
            </div>
          </div>
          <div class="offset-xl-1 col-xl-11">
            <div class="row">
              <div class="col-xl-3 text-center">
                <p class="text-social"><a href="#" class="social-link">Facebook&nbsp;</a></p>
              &nbsp;</div>
              <div class="col-xl-3 text-center">
                <p class="text-social"><a href="#" class="social-link">Instagram</a></p>
              &nbsp;</div>
              <div class="col-xl-3 text-center">
                <p class="text-social"><a href="#" class="social-link">Youtube</a></p>
              &nbsp;</div>
              <div class="col-xl-3 text-center">
                <p class="text-social"><a href="#" class="social-link">Tik-Tok</a></p>
              &nbsp;</div>
            </div>
          </div>
          <div class="offset-xl-1 col-xl-11">
            <div class="row">
              <div class="col-xl-3"></div>
              <div class="col-xl-3"></div>
              <div class="col-xl-3"></div>
              <div class="col-xl-3"></div>
            </div>
          </div>
          <div class="col-xl-11 offset-xl-1">
              <div class="row">
                <div class="col-xl-3"></div>
                <div class="col-xl-3"></div>
                <div class="col-xl-3"></div>
                <div class="col-xl-3"></div>
              </div>
       
          </div>
        </div>
      </div>
      <div class="offset-xl-1 col-xl-5">
        <div class="row">
          <div class="col-xl-12 text-center">
            <h2 class="text-h2-title">ABOUT US</h2>
			  <p class="text-about">Hemp Tarot was started by Graphic Designer Cameron Fletcher in 2021. Hemp Tarot is a THC and CBD based Tarot card deck used in Divination to see into a persons past, present, and future . At Hemp Tarot we connect the reader and the person being read with a unique experience to grow within and find their inner seeds of truth and wisdom through the divination  and power of the Tarot. <br>Find Your Seeds, Grow Within<br> with Hemp Tarot today !</p>
		  </div>
          <div class="col-xl-12">
            <p>Video</p>
            
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
<div class="container-fluid band-footer">
  <div class="container">
    <div class="row">
      <div class="col-xl-3 offset-xl-0"><img src="images/Logo.png" width="200" height="200" alt="Hemp Tarot Icon" class="mx-auto d-block img-fluid"/></div>
      <div class="col-xl-3 offset-xl-0">
        <div class="row">
          <div class="col-xl-12 text-center">
            <h3 class="text-h3-title">HEMP TAROT</h3>
            
			 
		  </div>
          <div class="col-xl-12 text-center">
			<p class="text-sub-title">Find your seeds, grow within</p>
		  </div>
        </div>
      </div>
      <div class="offset-xl-1 col-xl-5">
        <div class="row">
          <div class="col-xl-12">
            <div class="row">
              <div class="offset-xl-0 col-xl-6">
                <p class="text-foot-tab"><a href="#">HOME</a></p>
			  </div>
              <div class="offset-xl-1 col-xl-5">
				<p class="text-foot-tab"><a href="#">SOCIAL MEDIA</a></p>
			  </div>
            </div>
          </div>
          <div class="col-xl-12">
            <div class="row">
              <div class="col-xl-6">
				 <p class="text-foot-tab"><a href="#">TAROT CARDS</a></p>
			  </div>
              <div class="col-xl-5 offset-xl-1">
			   <p class="text-foot-tab"><a href="#">CONTACT US</a></p>
			  </div>
            </div>
          </div>
          <div class="col-xl-12">
            <div class="row">
              <div class="col-xl-6">
			   <p class="text-foot-tab"><a href="#">STORE</a></p>
			  
			  </div>
				
              <div class="col-xl-5 offset-xl-1">
				<p class="text-foot-tab"><a href="#">CHECKOUT</a></p>
			  </div>
            </div>
          </div>
          <div class="col-xl-6">
		   <p class="text-foot-tab"><a href="#">ABOUT US</a></p>
		  </div>
          <div class="col-xl-12">
	      <p class="text-copyright">Terms &amp; Conditions Privacy Policy Copyright@ Hemp Tarot LLC 2021</p>
		</div>
        </div>
      </div>
    </div>
  </div>
	
  
  </div>
	  
	  
	  
	  
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
  <script src="file:///Macintosh HD/Users/cameronfletcher/Library/Application Support/Adobe/Dreamweaver 2021/en_US/Configuration/Temp/Assets/eam43194028.TMP/js/jquery-3.4.1.min.js"></script>

	<!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="file:///Macintosh HD/Users/cameronfletcher/Library/Application Support/Adobe/Dreamweaver 2021/en_US/Configuration/Temp/Assets/eam43194028.TMP/js/popper.min.js"></script> 
  <script src="file:///Macintosh HD/Users/cameronfletcher/Library/Application Support/Adobe/Dreamweaver 2021/en_US/Configuration/Temp/Assets/eam43194028.TMP/js/bootstrap-4.4.1.js"></script>
</body>
</html>

Hello here is a copy of my full code 🙂

Report · Sep 23, 2021

All those scripts are pointing to FILES on your local computer which nobody can access except you. No wonder it doesn't work.

Did you define a local site folder in DW before you started this project?

Did you save the HTML document to your local site folder?

Nancy O'Shea— Product User, Community Expert & Moderator

NavBar Dropdown Not Working

Photos