Skip to main content
cambam1023
cambam1023
New Participant
September 23, 2021
Question

NavBar Dropdown Not Working

  • September 23, 2021
  • 4 replies
  • 1601 views

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 has been closed for replies.

4 replies

cambam1023
cambam1023Author
New Participant
September 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 🙂

Nancy OShea
Nancy OShea
Community Expert
September 24, 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
Nancy OShea
Nancy OShea
Community Expert
September 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
B
Ben M
Community Expert
September 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;
}

 

BenPleysier
BenPleysier
Community Expert
September 23, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices