Dropdown menu Problems

Report · Dec 29, 2016

I have a a dropdown menu and can't figure out how to customise it.

This is it before I click it and shown below it what is looks like after.

I'm trying to figure out how to change the colours of the menu button when clicked.

Ive tried editing in the style.css using the code

.style-nav button:active {}

But did not help. Does anyone know how to do this?.

Also how do i change the background of the home, product and contact us buttons.

I have tried using

.style-nav ul {

background colour: transparent

}

But this leaves a shadow at the border.

The dropdown menu code is shown below.

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

<li><a href="#">Contact Us</a></li>

</ul>

</div>

</nav>

Report · Dec 29, 2016

Hi,

please load up your website in question up to your server (no matter how it looks like ) and send us the link, so we can better help.

Hans-Günter

Report · Dec 29, 2016

Welcome to the weird, wonderful and complex world of Bootstrap. Example below, if you can live with it then youre a better person than I am. I'd rather write my own code any day than use this tripe of a framework where half the time its a complete guessing game as to what selectors to use to change anything.

You should make sure the css goes in an independent stylesheet linked to your page which comes AFTER the default bootstrap.css file. Never touch the default bootstrap stylesheet unless you know exactly what you are doing. It looks to me like you may already have an independent stylesheet as you have managed to change some of the properties.

<!doctype html>

<html>

<head>

<title>Bootstrap Demo</title>

</script>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 18px;

}

.nav_holder {

background-color: #06C;

padding: 10px 0;

text-align: center;

}

/* BUTTON DEFAULT */

.btn.btn-default {

border: 2px solid #fff;

font-size: 16px;

background-color: transparent!important;

color: #fff;

border-radius: none!important;

}

/* CHANGE BUTTON DEFAULT PROPERTIES ONCLICK */

.dropdown-toggle:active, .open .dropdown-toggle {

background: #80aaff !important;

color:#fff !important;

border: 2px solid #fff!important;

}

/* CLEAR BORDER AND SHADOW ON MENU HOLDER */

.dropdown-menu {

border: none!important;

-webkit-box-shadow: none!important;

box-shadow: none !important;

margin: 20px 0 0 0;

padding: 0;

}

/* STYLE ANCHOR TAGS IN DROPDOWN MENU */

.dropdown-menu > li > a {

background-color: #80aaff;

font-size: 16px;

color: #fff;

margin: 0 0 4px 0;

border-radius: 8px;

display: block;

padding: 10px 0;

text-align: center;

}

/* ANCHOR HOVER COLOR */

.dropdown-menu > li > a:hover {

background-color: #66F;

color: #fff;

}

.caret {

margin: 0 0 0 10px!important;

display: inline-block;

}

</style>

</head>

<body>

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

<li><a href="#">Contact Us</a></li>

</ul>

</div>

</body>

</html>

Report · Dec 29, 2016

Because some people are not clever enough to figure Bootstrap out, it does not mean that it should be dismissed as tripe. Millions of web publications have been made and are still being made using Bootstrap and for good reason, namely to save time and money.

Another, hardly publicised fact, when using a framework, it is easy for others, who are au fait with the framework, to recognise the code with a view to continue/rectify your work. Proprietary coding makes this much more difficult.

Without further diversion, Hans-Günter has asked for you to upload the site and supply the URL. This way we can look at your code in situ and be able to help you with your question.

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

Report · Dec 29, 2016

BenPleysier wrote:
Because some people are not clever enough to figure Bootstrap out, it does not mean that it should be dismissed as tripe.

That just about accounts for everyone in this forum then apart from those that are clever enough to have figured it out and can dismiss it as tripe.

Why should the OP upload anything. They have supplied the Bootstrap code, anyone who assumes they know anything about Bootstrap should know how to link it to the Framework to resolve the issue.

Report · Dec 29, 2016

Let's just stick to the OP's problem without adding another dimension.

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

Report · Dec 29, 2016

I use Bootstrap but I don't know what the OP has done to their custom CSS. Or which Bootswatch theme they might be using. Or whether or not the code is valid. Without a link, it's all guesswork.

One of the things I really like about Bootstrap are the built-in contextual classes. These classes make it a snap to style buttons and other elements without any extra CSS code. Contextual class colors vary a bit from Theme to Theme but the default Bootstrap colors are as follows:

-primary (dark blue)

-info (blue)

-warning (gold/yellow)

-danger (red/pink)

-success (green)

-default (gray)

<h2>Nesting Button Groups</h2>

<p>Nest button groups to create drop down menus:</p>

<button type="button" class="btn btn-danger">Apple</button>

<button type="button" class="btn btn-warning">Samsung</button>

<button type="button" class="btn btn-primary">Android</button>

<button type="button" class="btn btn-default">Nokia</button>

<button type="button" class="btn btn-info">Windows</button>

Sony <span class="caret"></span></button>

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

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

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

</ul>

</div>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 29, 2016

Nancy OShea wrote:
I use Bootstrap but I don't know what the OP has done to their custom CSS. Or which Bootswatch theme they might be using. Or whether or not the code is valid. Without a link, it's all guesswork.
One of the things I really like about Bootstrap are the built-in contextual classes. These classes make it a snap to style buttons and other elements without any extra CSS code. Contextual class colors vary a bit from Theme to Theme but the default Bootstrap colors are as follows:

Nothing to do with if the code is valid. Plus Bootstrap has 'extra css code', you forget they are somewhere within in the many lines of 'redundant' bootstrap css selectors`:

Plus if you want to change any of the default styling you are creating 'extra css code' almost doubling up sometimes, a great workflow, not. I doubt many designers would happily choose to use those default primary colors in their work unless they are creating a website for a fireworks factory or kintergarten

Report · Dec 30, 2016

osgood_ wrote:
I doubt many designers would happily choose to use those default primary colors...

Right. So you can use one of the Bootswatch Themes.

https://bootswatch.com/

Or better yet, roll your own custom theme with LESS/SASS.

For example, in my LESS.variables file, I added my own color values .

http://getbootstrap.com/customize/#buttons

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 30, 2016

Nancy OShea wrote:
osgood_ wrote:
I doubt many designers would happily choose to use those default primary colors...
Right. So you can use one of the Bootswatch Themes.
https://bootswatch.com/
Or better yet, roll your own custom theme with LESS/SASS.
For example, in my LESS.variables file, I added my own color values .
http://getbootstrap.com/customize/#buttons
Nancy

i was saying you would need to create MORE styling in response to you saying there is no need for additional styling. NOT that you cant change the colors.....hummm.

Report · Dec 31, 2016

If you use your own Bootstrap and a custom LESS, you're not adding anything. You're merely amending the LESS variables to suit. Depending on what you need from Bootstrap in many cases it's not more code, it's less code (no pun intended) .

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 31, 2016

Nancy OShea wrote:
If you use your own Bootstrap and a custom LESS, you're not adding anything. You're merely amending the LESS variables to suit. Depending on what you need from Bootstrap in many cases it's not more code, it's less code (no pun intended) .
Nancy

How many in this forum and probably the vast majority of Bootstrap users do you think ARE using their own files?

Report · Dec 31, 2016

Everyone who uses Dreamweaver to create their Bootstrap layouts is using their own (self hosted) CSS and JS files. DW creates them for you at the onset. So you have full control over them if you want it. Seasoned pros know how to leverage their Bootstrap with SASS/LESS files.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 31, 2016

Nancy OShea wrote:
Everyone who uses Dreamweaver to create their Bootstrap layouts is using their own (self hosted) CSS and JS files. DW creates them for you at the onset. So you have full control over them if you want it. Seasoned pros know how to leverage their Bootstrap with SASS/LESS files.
Nancy

Ok to put it more succinct, of the millions of Bootstap users, so I'm led to believe, how many of those do you think are seasoned pros, using less or sass, very few. Most are tom, dick and harry using the standard default bootstrap css file, linked from a CND or if using DW auto generated, then overwriting it with yet more css styling in a custom stylsheet to get rid of much of the default styling.

Report · Dec 31, 2016

Notwithstanding DW newbies, if you consider all the developers on Rails, Angular, Node, Amazon Services, etc.... I think the numbers are far greater than you or I realize. As one example, porting BS from LESS to SASS did not come out of thin air. A lot of Bootstrap users asked for and made a very clear case for adding SASS to the mix. You don't ask for something unless you fully intend to use it. Right?

DW forum users represent just one tiny fragment of the global Bootstrap user base.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 31, 2016

Actually l look at it the opposite way around a tiny fragment of Bootstrap users globally are professional users. But there is no clear way of identifing the breakdown. I suspect if it was a paid for product on subscription the numbers would rapidly fall off the cliff.

I think the only reason that the Bootstrap engineers dropped less was because sass seems to have become more popular than less, both in my opinion are a bit pointless for anything other than possibly teams that work on multinational accounts. Most developers have no real requirements to use it but its part of their workflow but ask the same developer if they use emmet or jade to lighten the workflow and you may get a negative response.

Report · Dec 31, 2016

<Actually l look at it the opposite way around...>

Of course you can look at anything any way you wish. But that doesn't always make it so.
<But there is no clear way of identifing the breakdown.>

You have to create a Pro BuiltWith account to generate your own leads filtered by XYZ technology & geographic region.

Twitter Bootstrap Usage Statistics

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 31, 2016

That doesnt supply much information about the type of user of Bootstrap. Its like saying we know of 100 million power drills in circulation but we dont know who the users are. They could be professional users or DIY users.

Report · Dec 31, 2016

You need a Pro BuiltWith account.

Watch the video.

Get a list of websites using Twitter Bootstrap -

Screencast | BuiltWith

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 31, 2016

Nancy OShea wrote:
You need a Pro BuiltWith account.
Watch the video.
Get a list of websites using Twitter Bootstrap -
Screencast | BuiltWith
Nancy

That only gives information (supposedly, if you believe it) about the kinds of businesses using a particular technology. It doesn't provide information as to who built it with the technology.

Report · Dec 30, 2016

how can i access these styles to change them?

Report · Dec 30, 2016

Copy and paste the following into a new document and view in browser.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.btn-active {
background-color: purple !important;
color: white !important;
}
</style>
</head>
<body class="container">
<div class="btn-group">
<h2>Nesting Button Groups</h2>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="btn btn-active">Home</a></li>
<li><a href="#" class="btn btn-danger">Product</a></li>
<li><a href="#" class="btn btn-danger">Contact Us</a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Don't forget to include !important to override the original code

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

Report · Dec 30, 2016

thankyou very much! I didn't use !important cause I thought it was just for my information.

Report · Dec 30, 2016

You can also try these examples.

CSS Dropdowns

Dropdown menu Problems

1 Correct answer