Participant

Beantwortet

Dropdown menu Problems

Forum|Forum|9 years ago
December 29, 2016
3 Antworten
2165 Ansichten

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>

Dieses Thema wurde für Antworten geschlossen.

Beste Antwort von osgood_

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>

BenPleysier

Community Expert

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!

O

osgood_

Legend

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.

Nancy OShea

Community Expert

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.

<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

O

osgood_Antwort

Legend

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>

hans-g.

Legend

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

Anmelden

Login über soziales Netzwerk

Willkommen

Login über soziales Netzwerk

Scanne Datei nach Viren

Diese Datei kann nicht heruntergeladen werden