Skip to main content
mindmastery
mindmastery
Known Participant
January 3, 2019
Answered

[Locked] Dropdown menu / nav

  • January 3, 2019
  • 5 replies
  • 1535 views

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>

This topic has been closed for replies.
Correct answer Nancy OShea

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>

5 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
January 4, 2019

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.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
ALsp
ALsp
Legend
January 4, 2019

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.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 4, 2019

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

Nancy O'Shea— Product User & Community Expert
ALsp
ALsp
Legend
January 4, 2019

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.

P
Paul-M
Legend
January 4, 2019

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

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

Paul-M - Community Expert
ALsp
ALsp
Legend
January 4, 2019

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
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
January 4, 2019

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>

Nancy O'Shea— Product User & Community Expert
mindmastery
mindmasteryAuthor
Known Participant
January 4, 2019

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
ALsp
Legend
January 4, 2019
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!

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 3, 2019

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 O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices