Skip to main content
cambam1023
Participant
Sep 23, 2021 4:49 AM UTC
Question

NavBar Dropdown Not Working

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>

This topic is closed to new replies. Start a new post to keep the conversation going.

5 replies

cambam1023
Participant
Sep 23, 2021 9:47 PM UTC
<!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 🙂

Translate
Nancy OShea
Community Expert
Community Expert
Sep 24, 2021 12:00 AM UTC

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?

 

Translate
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Community Expert
Sep 23, 2021 5:38 PM UTC

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.

 

Translate
Nancy O'Shea— Product User & Community Expert
Community Expert
Sep 23, 2021 12:33 PM UTC

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;
}

 

Translate
BenPleysier
Community Expert
Community Expert
Sep 23, 2021 6:11 AM UTC

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>
Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!