Skip to main content
N
nc_joe
Known Participant
March 7, 2017
Answered

The bootstrap menu styles don't display at all after correcting for drop downs not working

  • March 7, 2017
  • 1 reply
  • 3322 views

I was having the same problem about drop down menus not displaying correctly fromt the link below. I read completely the discussion at the following link:

https://forums.adobe.com/thread/2101473#access_token=eyJ4NXUiOiJpbXNfbmExLWtleS0xLmNlciIsImFsZyI6IlJTMjU2In0.eyJmZyI6IlJ…

I did everything you said.It  finally worked.

However, now I can't get the new styles for the menu to display correctly.  I am attaching the style page to this html file and it will not display the menus colors and hover colors, etc.  I got the styles from TWBSColor:

https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0

The new styles will not display, just the regular default styles. I have put the the new style sheet in the various locations in the code. Nothing works. What could be causing this?

First the new styles would show but the drop down menus would not display. Now the drop downs work but not the new styles from TBWSColor don't.  Any suggestions?

Thanks.

Joe

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

When you first create a new Bootstrap document, DW has assets in a TEMP folder until you save & name your document.  Assuming your site is properly defined, DW will then resolve the path and put copies of Bootstrap & jQuery in your local site's assets folder. 

DO NOT edit Bootstrap files.  Always use a separate external stylesheet for your custom overrides.   Your custom stylesheet must appear below the Bootstrap.css file in your code.

Nancy


Copy & paste this code into a new, blank document and save it.  This is what it looks like with the Darkly Theme.  Other Bootstrap Themes are available from MaxCDN. Bootswatch · BootstrapCDN by MaxCDN

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS, Darkly Theme-->

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet" integrity="sha384-S7YMK1xjUjSpEnF4P8hPUcgjXYLZKK3fQW1j5ObLSl787II9p8RO9XUGehRmKsxd" crossorigin="anonymous">

<!--custom CSS-->

<style>

body {padding-top: 75px}

</style>

</head>

<body>

<!--begin top nav bar-->

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

<div class="container-fluid">

<div class="navbar-header"> <a class="navbar-brand" href="#">XYZ Website</a>

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

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

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

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

</button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-left">

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

<li><a href="#">Darkly Theme</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

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

<ul class="dropdown-menu">

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a> </li>

<li><a href="#">MENU 6</a></li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<div class="container">

<div class="row">

<div class="jumbotron">

    <h1>Hello, world!</h1>

    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

    </p>

</div>

<!--/row--></div>

<hr>

<div class="row">

<footer class="text-center"><small>© 2017 XYZ Website.  All rights reserved</small></footer>

<!--/row--></div>

<!--/container--></div>

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

</script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

1 reply

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
March 7, 2017

There can be a number of reasons, but without seeing your code this turns into a guessing game. The best way is to provide a link to the site.

In the meantime, make sure that the new styles are loaded after the original style rules.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
N
nc_joeAuthor
Known Participant
March 7, 2017

Hi thanks for replies.

I can't provide a link.  I am developing this with Server Press.  It is a .dev site.  I can copy and paste the code here but have no link to provide you.  What do you suggest? Thanks.

Joe

N
nc_joeAuthor
Known Participant
March 7, 2017

And another problem I am having is shown in the images I have enclosed.  I'm confident that I am setting up site correctly.

Image 1 is the error message I get when I am ready to finish off setting up the site.  Image 4 shows the incorrect path that is created.  I know this is not correct. I can point it in the right direction but don't know why this is happening in the first place.

Image 2 and image 3 are the images I took that shows what steps I take to create the site.

Please help.

Joe

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices