Hi People.
As you know, Bootstrap elements are locked so flippin flamboyants like me cant go and muck things up...
However, they are not styled very nicely....
I have been playing with the "NAVBAR" element which I REALLY want to use in a responsive site.
I love it that when the screen size drops, the "NAVBAR" switches to a drop-down menu thing...
But, it does not fit in with the colour scheme...
I have managed to learn how to re-style the actual portion that has the buttons, etc. etc.
But that leaves me with the background out of style...
I cannot seem to be able to add a CSS to change the colour of the background...
I have been in and had a look thru the code and found a bit that styled it as LIGHT, or DARK, etc. and O did change it to a DARK colour, but it still does not match the site.
If I cannot change the colour to match the background of the site, the alternative is to change the background of the site to match the NAVBAR....
NOT IDEAL !!!
I have attached a screenshot JPEG to give you a more visual idea.
Thank you all in advance.
Glen
1 Correct answer
Replace your current Bootstrap CSS with a Bootswatch Theme. Currently, there are 21 color themes to choose from -- Cerulean to Yeti.
This is a working code example using the Flatly theme from Bootsterap CDN.
https://www.bootstrapcdn.com/bootswatch/
To try other themes, simply replace the theme name on Line #9.
...<!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,
5
Replies
I find it easier to style it in Wappler than in Dreamweaver, at least Wappler has a real (usable) CSS Designer 
Replace your current Bootstrap CSS with a Bootswatch Theme. Currently, there are 21 color themes to choose from -- Cerulean to Yeti.
This is a working code example using the Flatly theme from Bootsterap CDN.
https://www.bootstrapcdn.com/bootswatch/
To try other themes, simply replace the theme name on Line #9.
<!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>Bootswatch Demo</title>
<!-- Bootswatch Flatly CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-T5jhQKMh96HMkXwqVMSjF3CmLcL1nT9//tCqu9By5XSdj7CwR0r+F3LTzUdfkkQf" crossorigin="anonymous">
<style>
/**styles for large devices**/
@media (min-width: 990px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
/**optional offset from top**/
top: 2%;
}
}
</style>
</head>
<body>
<nav id="topNav" class="navbar fixed-to navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="/">
<!--Your logo goes here-->
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.2.1.js"></script>
</body>
</html>
AdChoices