I've done a crap ton of research into how I can accomplish this, but I can't find anything solid or anything that I can properly understand.
I want to override the Bootstrap Dropdown hover color. Not the Dropdown menu, the actual Dropdown button itself. By default, the text color is white, and when you hover over it, it's some sort of blue-green color. I want to make the blue-green color to white as well.
Does anyone have any idea how I can go about doing this?
Here's my current code incase you need it:
CSS:
#media {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.navbar-custom {
color: #262626;
background-color: #262626;
}
.navbar-default {
color: #262626;
background-color: #262626;
border-top: 4px solid red;
}
.navbar-default .navbar-brand:hover {
color: white;
}
.dropdown:hover {
color: white;
}
}
body {
background-color: black;
}
#navbar {
width: 100%;
}
HTML:
<div class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="dropdowns">
<a class="navbar-brand" id="brand">Traders: </a>
<li class="dropdown">
General <span class="caret"></span>
<ul class="dropdown-menu pull-left" role="menu">
<li>Medical</li>
<li>Utility</li>
</ul>
</li>
</ul>
</div>
</div>
Sorry if I left something out or don't make much sense, currently on some powerful pain meds. This helps me get my mind off the pain.
You can try including the !important to the style:
color: white !important;
this is done to override the default styles bootstrap establishes for the elements.
Related
I have a question concerning CSS selectors. How to choose a correct one?
For example I have this piece of HTML:
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p style="font-size:1.2em" class="navbar-text">Project name</p>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="navbar-nav nav navbar-right">
<li><a style="font-size:1.2em" href="#AboutMe">Text1</a></li>
<li><a style="font-size:1.2em" href="#Social">Text2</a></li>
<li><a style="font-size:1.2em" href="#Projects">Text3</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
To make my list elements li in unordered list ul to change appearance I saw next CSS selector:
.navbar-inverse .navbar-nav > li > a:hover {
background-color: white;
color: black;
}
And how I understand this selector says: chose all a elements children of li element who in his turn a child of an element with .navbar-nav class (?) and all of this inside and element with .navbar-inverse class (?).
And this work well. But. If change this selector to another one:
li > a:hover {
background-color: white;
color: black;
}
This does not work. But what it's say: chose all a elements that's a direct children of li element.
Or maybe I do not understand very well concept of CSS selectors.
Thanks.
Edit:
That's all my internal CSS who could potentially influence nav element.
Thanks.
/*
Solution from "http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site"
*/
body { padding-top: 40px; }
#media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
.anchor {
padding-top:40px;
}
.navbar-inverse .navbar-nav > li > a:hover {
background-color: white;
color: black;
}
.navbar {
background-color: #444;
border: 0px;
letter-spacing: 2px;
padding-right: 50px;
padding-left: 50px;
}
Well, your problem is definitely one of specificity since the selector with more specificity is providing the correct results. You can look at MDN to explain more or look here at CSS tricks to go into more detail. But essentially, selectors each have a number associated with them of priority, elements have the lowest number, inline styles and !important have the highest. The more selectors in your CSS, the higher the number. Higher numbers will override lower numbers when rendering int he browser.
It is hard to tell without seeing more of your CSS, but if you have styles for your a tag or l tag that have classes on them this would cause your issue. For example:
.navbar-nav .nav-right a {
background: blue;
}
Would prevent your hover from taking effect with just "li > a:hover" because the browser takes the background color of the higher specificity. So perhaps look at other styles above this in your sheet. When in doubt, try things out in codepen.
Here is my codepen.
Question 1
How I can change the background and text colour of the drop down menu my navigation bar on my webpage? Just for answer purposes I wanted the text to be white and the background colour to be grey. (I'm not asking for anyone to do it for me just trying to make things clear)
Question 2
At the moment in time within my coding, when I hover over the navigation bar text in the drop down menu at the bottom of the box an underline appears. However, I want the underline to appear under each text of each webpage when the user hovers over it instead of at the bottom of the navigation bar drop down menu box.
Any helpful links with identifying classes?
In addition, in terms of the the navigation bar html I'm finding it hard to identify the class name for what does what therefore, when I do my CSS I can easily identify what class I need to write. As a result of this, I was wondering if anyone has any good helpful tutorial links which can help me with this.
HTML code
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2" id = "section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer></footer>
</html>
CSS code
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color:red;
border-radius: 9px;
transition:all .2s;
}
.navbar.navbar-default ul li a:hover {
color: red;
}
.nav.navbar-nav, .nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color:red;
text-decoration:none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 90vh;
background-color: #FFFFFF;
text-align: center;
}
.section2 {
height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
footer {
height: 5vh;
}
</style>
Question 1 Answer:
For question 1 answer read the https://stackoverflow.com/users/7650566/rcruey 's answer. By that system, you can add background color and text color.
Note: Background color and the color are the basics of CSS. If you have enough time, you need to learn more about CSS first.
Question 2 Answer:
To underline under each text of each webpage when the user hovers over it. It's so simple. Just make the code for your paragraph and the link.
p, a{
text-decoration: none;
}
p:hover, a:hover{
text-decoration:none;
}
and avoid this code for navigation bar just add this for navigation bar menu specially, which is done in question 1:
.dropdown .dropdown-menu {
background-color: grey;
}
.dropdown .dropdown-menu a{
color: white;
}
.dropdown .dropdown-menu a:hover{
text-decoration: underline;
text-decoration-color: black;
}
And finally for suggestion :
I want to say that, you may be try to overwrite the bootstrap class in your code.
For this, use inspect element of Chrome or Firefox. By clicking on the above field and click Inspect element. Then you will see which class or id's are used for the above style-sheet.
And to get perfect result using bootstrap over-righting... in your index.html page, correctly link up the styles. Try to link up bootstrap.min.css first and then add your own style.css. This will give you a perfect result.
When it comes to adding color inside of elements you want to make sure you are specific with the details. For example with what you gave me I figured this out.
Insert this in your CSS document and tell me if this is what you mean. If so just make sure you have one element (Menu for example) selected for the background color, and then the next element (navbar or a links for another example.) To color the next element.
Also for anenter code here easy fix for underlining font, just use a text-decoration command. Solid border-bottom 1px etc. I hope this helped.
.dropdown .dropdown-menu {
background-color: grey;
}
.dropdown .dropdown-menu a{
color: white;
}
.dropdown .dropdown-menu a:hover{
text-decoration: underline;
text-decoration-color: black;
-moz-text-decoration-color:black;
}
So I'm revamping my personal website and starting from scratch. I'm starting off with a navbar that's fixed to the bottom. However, when I insert the CSS rules with an internal stylesheet, it works the way I want it to, but when I use those exact same rules with an external stylesheet, the margin does not work properly.
Specifically, this is the problem rule:
.nav li {
margin: -5px;
}
With an internal stylesheet, it acts as intended, covering up unwanted whitespace in between the list items of my navbar (which is a stacked navbar fixed on the bottom).
However, when I put this exact same rule in the external sheet, it does not cover up that whitespace. Some other weird behavior is that if I comment out "margin: -5px;" it changes nothing, but if I comment out all of the rule ".nav li { margin: -5px; } it moves the content of each list item to the left (which is supposed to be centered using "text-align: center" in another rule.
I'm really confused by this odd behavior. Can anyone help me? Thanks.
EDIT: The weird thing is that other than linking bootstrap, jquery, etc. the html and css is pretty much nonexistent. I just put in a navbar and that's about it.
Here's the html in the body:
<div class="container-fluid">
<nav class="navbar navbar-fixed-bottom">
<ul class="nav nav-pills nav-stacked">
<li><a class="about" href="about.html"><div class="navTileContent"><i class="glyphicon glyphicon-user" aria-hidden="true"></i><p>about</p></div></a></li>
<li><a class="portfolio" href="portfolio.html"><div class="navTileContent"><i class="glyphicon glyphicon-briefcase" aria-hidden="true"></i><p>portfolio</p></div></a></li>
<li><a class="art" href="art.html"><div class="navTileContent"><i class="glyphicon glyphicon-edit" aria-hidden="true"></i><p>art</p></div></a></li>
<li><a class="contact" href="contact.html"><div class="navTileContent"><i class="glyphicon glyphicon-envelope" aria- hidden="true"></i><p>contact</p></div></a></li>
</ul>
</nav>
</div>
And here's the only CSS I have:
<style>
.nav li {
margin: -5px;
}
.nav li .navTileContent {
color: #e1e8f4;
text-align: center;
padding: 1%;
}
.nav li .navTileContent p {
padding-left: 20px;
display: inline;
}
.about {
background-color: #6ad8d1;
}
.portfolio {
background-color: #12d132;
}
.art {
background-color: #12466b;
}
.contact {
background-color: #0d336d;
}
</style>
This is meant to be a very simple sort of use case example, so while the styles won't match yours, I hope you see what I am trying to say.
<style>
li {
color: orange;
}
li.active {
color: blue;
}
li.muted {
color: red;
}
</style>
<style>
li {
color: blue;
}
li.active {
color: orange;
}
</style>
<ul>
<li>Notice this is not orange</li>
<li class="active">Notice this is orange</li>
<li class="muted">notice this is red, because nothing has overwritten it's style definition</li>
</ul>
New to Bootstrap and creating a basic navigation bar. I am hoping that what I need makes sense. Put simply, I need the background color and text color of list items in the dropdown-menu to match both before and after they collapse. I cannot seem to find the right CSS attributes to edit, and the many combinations that I have tried do not solve my problem. A similar question did not solve my problem, but perhaps it is worth looking at for others.
Below is what the menu looks like before it collapses. Each <li> has a link, or <a>, within it (see basic HTML below). The text color is black, and the background color is white. When the item is hovered over, the background of <li> turns tan. I want the same colors after the menu collapses:
After collapse it appears like this:
The colors seem to change back to Bootstrap's defaults after collapsing. I would like the text for Sub 1 and Sub 3 to be black by default with a white background, while keeping the color behind the header, Stuff 2, the same. The colors seem to work fine when clicked or hovered over (tan background with black font).
Below is some of the relevant HTML and CSS. I know that some of it is messy (and that the use of !important; is often considered poor form), but I hope someone out there can help me identify the block of code so I can get it working and then focus on cleaning it up.
Basic HTML:
<nav class="navbar navbar-inverse">
<div id="navbarbg" class="container-fluid">
<div id="rbgnavbar" class="container">
<div class="navbar-header">
<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>
<a id="logo" class="pull-left" href="http://www.redbuttegarden.org"><img src="images/logo.png" alt="Red Butte Garden"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 1 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 2 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 3 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
Basic CSS:
#rbgnavbar a:hover, a, li, .dropdown-menu li:hover {
color: #000000;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
color: #000000;
}
/* Main dropdown menu items change cover when selected/clicked */
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
.dropdown-menu li, .dropdown-menu a {
text-align: center;
color: #000000;
}
.dropdown {
font-size: 10px;
padding: 0;
font-weight: bold;
}
#rbgnavbar {
max-width: 1400px;
margin-left:auto;
margin-right:auto;
background-color:#00502F;
}
.rbgwhitelink {
color: #FFFFFF;
}
.dropdown ul {
padding-top: 0px;
padding-bottom: 0px;
font-size: 10px;
font-weight: bold;
}
/* Border thickness and color between dropdown menu li, padding */
.dropdown-menu li {
border-top: 2px double #D3D3D3;
padding-top: 5px;
padding-bottom: 5px;
}
/* Background color of li in navbar when hovered over */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li:hover {
background-color: #F2EDE4;
}
/* Makes dropdown-menu li links bold*/
.dropdown-menu li > a, .dropdown-menu li > a:visited {
font-weight: bold;
}
I suggest to use media queries and add the classes you want to tweak.
For example:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.dropdown-menu>li>a {
background-color: #fff;
}
}
For Bootstrap 3 default media queries you may found it here
After some experimenting, this did it:
.dropdown-menu li {
background-color: #FFFFFF;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
}
.dropdown-menu li > a:hover {
text-decoration: none;
}
/* Changes the color of link text <a> after navbar has collapsed for small screen or mobile mode */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:visited {
color: #000000;
}
I think you have to change this color:
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
I am using the Bootstrap drupal theme. My menu items show up vertically, with styling (underline on hover and a dot next to the them. Am I missing something in my PHP or in my CSS? Also my hover dropdown isn't working. Not sure if that has to do with the way it is showing up now.
<div class="menu_wrapper">
<nav class="navbar" role="navigation">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">
<?php $navigation = menu_navigation_links('main-menu');
print theme('links__system_main_menu', array('links' => $navigation));?>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</nav><!-- end main-menu -->
</div>
CSS
/* Menu */
.menu-wrapper {
background-color: #c32523;
opacity: 40%;
width: 100%;
height: 50px;
border-bottom: 1px solid #000000;
}
.navbar {
color: #ffffff;
}
nav {
color: #ffffff;
text-decoration: none;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown ul.dropdown-menu {
margin-top: 0;
}
The menu wrapper class in your HTML is menu_wrapper with an underscore but in your css you used a hyphen .menu-wrapper. Change 1 of them accordingly and your styles will apply.