I'm quite new to Bootstrap, I've set up a dropdown pill and played around with the colours.
What I'd like to do is change the colour of the dropdown title pill after it has been selected. It currently changes to a light grey:
Here is my code:
<div class="row hidden-xs">
<div class="col-md-12">
<ul class="nav nav-pills nav-justified nav-filter">
<li role="presentation">Valentine's Day</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Recipient <span class="caret"></span>
</a>
</li>
<li role="presentation">Occasion</li>
<li role="presentation">Type</li>
<li role="presentation">New</li>
<li role="presentation">On Sale</li>
</ul>
</div>
</div>
What would the CSS be to overide this colour? - not the dropdown itself, just the title link.
Thanks
You would override the hover, active and focus state of .nav-pills like this..
.nav-pills>li>a:hover {
background-color: #FF6699;
}
.nav-pills .open>a, .nav-pills .open>a:active, .nav-pills .open>a:focus{
background-color: #FF6699;
}
Demo
This will change the background/text color of the active class (inc. focus):
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus {
color: white;
background-color: blue;
}
Use following css:
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
background-color: red;
}
.nav-tabs>li>a:hover {
background-color: red;
}
DEMO
.nav>li>a:hover,.nav>li>a:visited {
background-color: #222; /* add your desired color */
}
Related
I want to change the background color of ngx-pagination
My code:
<pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previousLabel="" nextLabel=""></pagination-controls>
The default background color is blue, and I want to change to red.
How do I it?
Solution:
In the CSS:
.custom-pagination /deep/ .ngx-pagination .current {background: red;}
And install jquery in the project.
Use pagination-template instead of pagination-controls.
Example:
<pagination-template
#p="paginationApi"
(pageChange)="onPageChange($event)"
*ngIf="myList">
<div class="pagination-custom">
<ul class="pagi">
<li class="item">
<a *ngIf="!p.isFirstPage()"
[class.disabled]="p.isFirstPage()"
(click)="p.previous()"
class="page-link"
aria-label="Previous">
<span aria-hidden="true" class="la la-caret-left"></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li *ngFor="let page of p.pages"
[class.active]="p.getCurrent() === page.value"
class="page-item">
<a (click)="p.setCurrent(page.value)"
class="page-link"> {{ page.label }}
</a>
</li>
</ul>
</div>
</pagination-template>
You can achieve this by editing paginator in the CSS file. For example (red background and red border):
.page-item.active .page-link {
background-color: red;
border-color: red;
}
You can add this for global css file.
An example of fully red paginator:
.page-item.active .page-link {
background-color: red;
border-color: red;
}
.page-link {
color: red;
}
.page-link:hover {
color: red;
}
(document.querySelector('.pagination-next') as HTMLElement).style.color = 'black';
(document.querySelector('.pagination-previous') as HTMLElement).style.color = 'black';
for angular
On mobile here, I have a dropdown menu that comes down with some options in it. I would like these links to change color to grey when one "hovers" on it with the thumb on the phone. I haven't managed though I have tried several options as you can see in the code. This is it:
<div class="total">
<ul class="nav navbar-nav" >
<li>
<div class="id"><a style="width:100px" data-toggle="dropdown" href="#"><img src="grey.png" alt="Friends in class" class="barimage"> <span ></span></a>
<ul class="dropdown-menu">
<div class="dropdown">
<li><p><b>Search your friends</b> </p>
</li>
<li><p class="menupar"><b>My Friends </b></p>
</li>
<li><p class="menupar"><b>My account</b></p>
</li>
<li><p class="menupar"><b>Logout</b></p>
</li>
</div>
</ul>
</div>
</li>
and this is the CSS:
.dropdown {
margin-top:-3px;
width: 200px;
height:220px;
background-color: rgba(36, 96, 70, 1);
font-size:20px;
line-height:50px;
border-radius: 3px;
}
.menunav {
width: 200px;
height:80px;
color:green;
font-size:20px;
line-height:50px;
border:solid black;
border-radius:1px;
}
a:link {color:white;}
a:visited {color:white}
a:hover.menunav {background-color:grey;}
a:active.menunav {background-color:grey;}
a:focus.menunav {background-color:grey;}
a.menunav {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
Not really sure why you'd want a hover effect on a mobile device, but using :focus whenever you use :hover should do the trick.
I using joomla 3.3.3 and boostrap 3.2.0
I have edited joomla menu module source to incorporate bootstrap classes to create drop down menus.
Browser renders drop down list as:
<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after
</ul>
The dropdown itself works fine (including with a third party hover js and css added). For some reason if I use href="#" for the parent of the drop down (so it doesn't link to a page) the li holding the parent drop down gets hidden as shown below:
<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav" style="display: none;"> <===**** DISPLAY NONE GETS ADDED
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after
</ul>
Bootstrap css for the nav li is:
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
.nav > li.disabled > a {
color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
The display: block on the first nav > li rule seems to get disabled for some reason. Any help would be appreciated.
First up you shouldn't edit the menu module, you should instead create an alternative module layout for it which can then be selected from the (un-hacked) menu module.
What you are seeing is a conflict with Mootools, use of which is not supported in combination with Bootstrap. jQuery and Mootools (specifically mootools-more.js) are conflicting and as Bootstrap is dependant on jQuery you should not be loading Mootools as well.
p.s. There is a joomla.stackexchange.com now :)
I've been trying to change the text color in a bootstrap template's navbar and have been unsuccessful. Anyone know where I'm going wrong? Here is my code.
<!--navbar-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="nav-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Restaurant</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"> </b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<!--navbar-->
The CSS:
.navbar-inner {
color: #FFF;
}
I also tried this:
#nav-inner {
color: #FFF;
}
If you want to change the css for the tabs you need to add color: #ddd; to the following
.navbar .nav > li > a {
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ddd;
}
Hope it helps!!
My guess is that Bootstrap defines a more specific CSS rule that is winning out over your more general rule. You should examine the page with Firefox or Chrome's developer tools to see which styles are winning out over others. If your style doesn't even show up, then you know there's a more basic problem, but if Bootstrap's style is overriding your color, you have to give your style a higher precedence.
For a sanity check, try this overkill rule:
html body .navbar .navbar-inner .container {
color: #FFF;
}
And if that works, then experiment with a lower level of specificity to see how specific you really need to get.
If all else fails, you can always do:
color: #FFF !important;
The CSS2 specification lays this out in detail.
.navbar .nav > li > a {
float: none;
color: #5FC8D6;
background-color: #002E36;
}
.navbar .nav > li > a:hover {
float: none;
color: #002E36;
background-color: #5FC8D6;
}
It works... try it out.......
.navbar-nav > li > a:link
{
color:red;
}
nav.navbar-nav.navbar-right li a {
color: blue;
}
Works like a charm! Found it on another thread, so am not taking credit for it.
I am using WordPress
I have put an extra container in the navigation menu. The navigation menu has the id #access, and the extra container has the id #language-selection . The #language-selection container uses <li> elements, but the hover and focus are overridden by the following:
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
How can i overwrite these rules, so that nothing happens on hover and on focus on the #language-selection container, when it is inside the #access container?
Following is the HTML:
<nav id="access" role="navigation">
<h3 class="assistive-text">Main menu</h3>
<div class="skip-link">
<a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a>
</div>
<div class="skip-link">
<a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a>
</div>
<div class="menu">
<ul>
<li class="page_item page-item-24 current_page_item">
Home
</li>
<li class="page_item page-item-26">
Contact
</li>
</ul>
</div>
<div id="language-selection">
<ul class="qtrans_language_chooser" id="qtranslate-chooser">
<li class="lang-en active">
<a href="http://localhost/katarina/?lang=en" hreflang="en" title="English" class="qtrans_flag qtrans_flag_en">
<span style="display:none">English</span>
</a>
</li>
<li class="lang-DK">
<a href="http://localhost/katarina/?lang=DK" hreflang="DK" title="Dansk" class="qtrans_flag qtrans_flag_DK">
<span style="display:none">Dansk</span>
</a>
</li>
<li class="lang-fa">
<a href="http://localhost/katarina/?lang=fa" hreflang="fa" title="Farsi" class="qtrans_flag qtrans_flag_fa">
<span style="display:none">Farsi</span>
</a>
</li>
<li class="lang-ar">
<a href="http://localhost/katarina/?lang=ar" hreflang="ar" title="???????" class="qtrans_flag qtrans_flag_ar">
<span style="display:none">???????</span>
</a>
</li>
</ul>
<div class="qtrans_widget_end"></div>
</div>
</nav>
So basically i want hover and focus to remain the same on the "Home" and "Contact" links, but to be deactivated on every li element inside #language-selection
Since you've provided the HTML, it's a little easier to see what you mean. My advice would be to add .menu as a specifier in the style so it only works within that container and doesn't include #language-selection. So:
#access a:focus { ... }
Then becomes
#access .menu a:focus { ... }
Then it will only apply that style to the anchors found within the div.menu.
The key is to be as specific with your style as possible. Just be careful though, because the more you apply the higher the styles specificity goes up. Meaning:
<div id="foo">
<div id="bar">
<a class="baz">Hello, world!</a>
</div>
</div>
Then apply:
#foo #bar a { color: red; } /* higher specificity */
#bar a.baz { color: green; }
The link will actually be red and not green.