[Locked] Dropdown menu / nav

[mindmastery]

Hi Guys,
I use Dreamweaver CC, and just wondering if anyone could enlighten me as to how to add a dropdown to one of my navigation menu items, with this code below - eg. under 'Self Help' which I have bolded below (otherwise if you need the site, it's at mindtraining.net).   Any suggestions would be appreciated!  : )

Cheers,

Craig T

<header class="no-margin">

         <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

            <div class="navigation">

               <div class="container">

                  <div class="navbar-header">

                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">

                     <span class="sr-only">Toggle navigation</span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     </button>

                  </div>    <div class="navbar-collapse collapse">

                     <div class="menu">

                        <ul class="nav nav-tabs" role="tablist">   <li role="presentation"><a href="https://www.mindtraining.net/index.php">Home</a></li>

                     <li role="presentation"><a href="https://www.mindtraining.net/self-help-hypnosis/index.php">Self Help</a></li>

                     <li role="presentation"><a href="https://www.mindtraining.net/sports-mental-training/index.php">SPORTS</a></li><li role="presentation"><a href="https://www.mindtraining.net/motivational-info/index.php">Articles | Quotes</a></li> <li role="presentation"><a href="https://www.mindtraining.net/admin.php">Admin | Contact</a></li>

  <li role="presentation"><a href="https://www.mindtraining.net/sports-mental-training/online-shop.php"><strong>Products</strong></a></li>

                        </ul></div></div></div></div></nav>  </header>

[Nancy OShea]

Your CSS file indicates that you're using an older version of Bootstrap 3.1.  The current version is 4.2.  Before I attempt to answer your "Drop-menu" question,  do you want to upgrade to the latest version of Bootstrap which means re-writing large chunkls of code?

[Nancy OShea · Accepted solution]

This is the code for a Bootstrap 3.1 navbar.

<!-- Static navbar -->

  <div class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container-fluid">

  <div class="navbar-header">

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

  <span class="sr-only">Toggle navigation</span>

  <span class="icon-bar"></span>

  <span class="icon-bar"></span>

  <span class="icon-bar"></span>

  </button>

  <a class="navbar-brand" href="#">Project name</a>

  </div>

  <div class="navbar-collapse collapse">

  <ul class="nav navbar-nav">

  <li class="active"><a href="#">Link</a></li>

  <li class="dropdown">

  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

  <ul class="dropdown-menu">

  <li><a href="#">Action</a></li>

  <li><a href="#">Another action</a></li>

  <li><a href="#">Something else here</a></li>

  <li><a href="#">Link</a></li>

  <li><a href="#">Link</a></li>

</ul>

  </li>

  </ul>

  </div><!--/.nav-collapse -->

  </div><!--/.container-fluid -->

  </div>

[mindmastery]

Thanks so much as always Nancy, you are always amazingly helpful.   That works great, appreciate it and your thoughts!  

And thanks for your input Al, I did try to solve it via w3schools but had no luck.  I did have a web guy create the templates for the webpages, but it's pretty expensive to keep going back there for every tiny thing.   That's why this forum is pure gold.  

Thanks guys.

Cheers,

Craig T

[ALsp]

And thanks for your input Al, I did try to solve it via w3schools but had no luck.

You're welcome. My pleasure. Keep trying though!

[ALsp]

If you allow yourself to use Dreamweaver starter pages, you will be trapped with Bootstrap - until Adobe decides to replace it. Adobe does not use its own code. You would be far better served taking one of the following paths:

1. Learn how to code CSS pages yourself. It's surprisingly easy and will be far more efficient
2. Hire a web designer (specify one that knows how to write CSS from scratch)
3. Use a Dreamweaver extension that automates menu building

Here is a code comparison, with a working menu, based on Nancy's Bootstrap code:

http://projectseven.com/testing/adobe-forum/menu-code/

Good luck. This forum is not Adobe support. It is manned by volunteers.

[Nancy OShea]

Al cannot resist bashing Bootstrap or the people who use it.  Just so you understand, Al doesn't build websites professionally and doesn't work for Adobe.  Al's company makes commercial DW extensions.  That's his bread & butter, not Bootstrap.   If extensions are your preferred workflow and you've got a budget for them, great.  That's your choice.  But understand, I'm not trying to sell you anything.   

Getting back to the topic, code for Bootstrap 4 navbars  can be found below.

Tryit Editor v3.6

[ALsp]

Al cannot resist helping people honestly. Nancy cannot resist making snide personal comments. Obviously.

Getting back to the topic:

How you build a page should be your choice. Not mine, and certainly not Nancy's.

And I'm not trying to sell you a bloody thing. I presented you with the only possible choices you have. As for getting business from this forum? This place is dead and has absolutely no marketing appeal to us or any other extension developer. There are less than 10 regular posters on this list and precious few new posts each day. But if you choose to look at extensions as a solution, contact me and I'll give you one - for free - and Nancy can give you help with Bootstrap if that's the direction you want to take.

Sheesh.

[Paul-M]

And I'm not trying to sell you a bloody thing.

.....And yet you post a link to your website ....

[ALsp]

What a...

I posted an example. I've been doing that since before you even heard of Dreamweaver. I must have banned you from our forums for being tactless and abusive. That's the only thing I can think of for this vendetta of yours. Get over it. You'll feel better More alive. Nicer.

Why don't you buy a special server for ACP examples. We can all use it. Wait... aren't some of the ACPs web designers - who charge for their services? And they post the occasional code example from their own domains? How horrible.

[BenPleysier]

One of the replies insinuates that there is something massively wrong with Bootstrap, so much so that he is wanting that Adobe should replace it.

As for suggested alternatives:

1. Learn how to code CSS pages yourself.

Great idea, but very hard to do if you cannot see immediate results. With Bootstrap you will see the results and you can start learning from there.

2, Hire a web designer

Also a great idea. Good for us web developers, but this will not help you to learn

3. Use a Dreamweaver extension that automates menu building

Also a great idea. It will help to line the pockets of ....... You guessed it.

This forum is sponsored by Adobe to facilitate discussions and assistance among Dreamweaver users. Unfortunately, commercial interests have spoilt that formula. Go figure.

[ALsp]

And hereeeeeeeeeeeeer's Benny...

One of the replies insinuates that there is something massively wrong with Bootstrap, so much so that he is wanting that Adobe should replace it.

I do think Bootstrap sucks. Do  you deny me that privilege? O could say that you liking Bootstrap is a conspiracy, but I'm not the type of person who makes wild claims.

I would slap your face if I were a girl (and standing in front of you), but I'm not a girl, and I'm nowhere near you. But I can say with certainty that you are a fool.

And I'm still waiting for a public apology.