I am designing bootstrap 3
How to get border bottom when the link is active ?
In which css3 code I have to mention.
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > a:focus, .navbar-default .navbar-nav > a:hover {
color: #354242;
background-color: #fff;} .navbar-nav { padding-top: 5px; }
.navbar-default .navbar-nav > a,.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { border-bottom: 2px solid #E74C3C; outline: none; } .navbar { min-height: inherit; margin-bottom: 0px; }
try this, i tried in your link using firebug, it works fine.
.navbar-right li .active {
border-bottom: 2px solid #E74C3C;
}
Related
I am trying to change the color for the background to blue when I mouse over using CSS. I was able to do this yesterday but clueless why it is not working today and its back to white. Been at it for hours and can't figure out whats wrong. Please note I want to do it with CSS, not javascript. It was doable with CSS.
This is the screenshot. I want that white part to be blue when I hover over. Right now it is white when I hover.
My CSS code which was working correctly, changing it to blue on mouse over.
.dropdown-menu {
background-color: #c1d100;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #fff;
background-color: #1a3278;
}
Code Pen
Added Code Pen. The above code is at CSS section lines 132 - 140. I have copied my exact code but in code pen everything seems default. Black font, white background for the dropdown.
CSS File
#font-face {
font-family: KenzoCustom;
src: url('../fonts/kenzo-regular.otf');
}
body{
/*background-color: #eaeaf4;*/
font-family: KenzoCustom, serif;
}
.formClass{
max-width: 350px;
min-width: 350px;
margin: 0 auto;
}
.img-responsive{
margin: 0 auto;
}
.logo-marpad{
margin-top: 40px;
padding-bottom: 80px;
}
.form-group{
text-align: center;
}
.input-center{
margin: 0 auto;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
background-color: #c1d001;
border-color: #c1d001;
}
.btn {
background-color: #c1d001;
border-color: #c1d001;
}
/* remove whitespace after navbar*/
.navbar {
margin-bottom: 0;
}
/* navbar-custom */
.navbar-custom {
background-color: #1a3278;
border-color: #1a3278;
border-radius: 0 !important;
}
.navbar-custom .navbar-brand {
color: #1a3278;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-custom .navbar-text {
color: #ffffff;
}
.navbar-custom .navbar-nav > li:last-child > a {
border-right: 1px solid #14275d;
}
.navbar-custom .navbar-nav > li > a {
color: #ffffff;
border-left: 1px solid #14275d;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
color: #c0c0c0;
background-color: #14275d;
}
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-custom .navbar-toggle {
border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
border-color: #14265b;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
background-color: #14275d;
color: #c0c0c0;
}
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
#media (max-width: 767px) {
.navbar-custom .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c0c0c0;
background-color: #14275d;
}
.navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-custom .navbar-link {
color: #ffffff;
}
.navbar-custom .navbar-link:hover {
color: #c0c0c0;
}
.navbar-brand-padding{
padding: 15px 15px;
}
/* Nav bar drop-down #c1d100 is main BG Green, #fff is text-color, Text BG is #1a3278 blue */
.dropdown-menu {
background-color: #c1d100;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #fff;
background-color: #1a3278 !important;
}
/* Remove border for navbar element*/
.navbar-custom .navbar-nav > li > a,
.navbar-custom .navbar-nav > li:last-child > a {
border: none;
}
/* Change logo and navbar size when screen size below 768px */
#media only screen and (max-width: 768px) {
#logo-img img{
width: 126px;
height: 30px;
}
.navbar-fixed-top{
position: relative;
}
.navbar-fixed-top{
margin-left: inherit;
}
}
#media only screen and (min-width: 768px) {
.navitem-margin{
float: left;
}
.navbar-font-sz{
font-size: 24px;
padding-right: 10px;
}
.navbar {
min-height:210px;
}
.logout-margin{
margin-bottom: 50px;
}
.navbar-fixed-top{
margin-left: 1200px;
}
}
The problem is in precedence order of files. The bootstrap is loading after his own style.
The soluction is reviewing the load order or apply !important in your rule:
http://codepen.io/anon/pen/adaBZY?editors=1100
BootStrap CSS is overriding your CSS. The best option is to make your address more specific. Use below CSS I just added ul before the class name
ul.dropdown-menu {
background-color: #c1d100;
}
ul.dropdown-menu > li > a:hover,
ul.dropdown-menu > li > a:focus {
color: #fff;
background-color: #1a3278;
}
You can use !important too, but it is not reasonable practice. I avoid using !important as much as possible.
Thanks
i want to change my bootstrap nav bar color. I used TWBSColor to make a custom color. This is what i want:
.navbar-default {
background-color: #ffd2d2;
border-color: #000000;
}
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #000000;
}
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #000000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}
.navbar-default .navbar-link {
color: #000000;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
}
And this is what it is:
html,
body {
height: 100%;
}
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
/* Home Page Carousel */
header.carousel {
height: 50%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
/* 404 Page Styles */
.error-404 {
font-size: 100px;
}
/* Pricing Page Styles */
.price {
display: block;
font-size: 50px;
line-height: 50px;
}
.price sup {
top: -20px;
left: 2px;
font-size: 20px;
}
.period {
display: block;
font-style: italic;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
#media(max-width:991px) {
.customer-img,
.img-related {
margin-bottom: 30px;
}
}
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}
.navbar-default {
background-color: #ffd2d2;
border-color: #000000;
}
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #000000;
}
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #000000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}
.navbar-default .navbar-link {
color: #000000;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
}
But i dont know how to add it ;( please help...
If all you want to do is just customize the navbar background color, the easiest way is just open the Bootstrap Customizer and change these two variables to suit your taste. The first one is for default and second is for inverse navbar variety.
#navbar-default-bg
#navbar-inverse-bg
Of course, whenever you upgrade to the next version of bootstrap, you have to remember this and make the proper variable change before downloading.
The second usual option is to install jekyll, node, grunt and other bootstrap dependencies and build bootstrap yourself by changing variables.less, but this method is an overkill if all you need is to customize background color. However, details about this second way is also provided in the Bootstrap Customizer page.
I want to remove the color of clicked elements on bootstrap navbar-default because I'm having a little problem with data-spy and clicked elements (If I scroll to another section manually the link I clicked before stays with color).
I want to remove the clicked link color but I want to keep the data-spy color. Anyone has an idea of how to do this?
I tried with
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
}
But it removes both colors
Use :visited and :active selectors instead of :focus.
Try this :
.navbar-default .navbar-right > li > a,
.navbar-default .navbar-right > li > a:hover,
.navbar-default .navbar-right > li > a:active,
.navbar-default .navbar-right > li > a:visited,
.navbar-default .navbar-right > li > a:focus
{
color: #fff; background: transparent;
}
.navbar-default .navbar-right > li.dropdown > a,
.navbar-default .navbar-right > li.dropdown > a:hover,
.navbar-default .navbar-right > li.dropdown > a:active,
.navbar-default .navbar-right > li.dropdown > a:visited,
.navbar-default .navbar-right > li.dropdown > a:focus
{
color: #fff; background: transparent;
}
In case someone has the same problem in the future, I solved it like this
/*Changes the color of the navigation text*/
.navbar-default .navbar-nav li a {
color: #fff;
}
/*Removes background color and text color from navigation items on hover & on focus*/
.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus {
color: #fff;
background: transparent;
}
/*Removes background color and changes the text color of active items using scroll-spy*/
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus {
background: transparent;
color: #ccc;
}
I am trying to change bootstrap navbar with completely different styles.
This is how I need to change its default styles -
At the moment I have completed more than 80% of this work and only thing I can not accomplish is its action of hover and active.
This is my CSS so far -
.navbar-default {
background-color: #000000;
border-color: #ffffff;
border-top: 1px solid #fff;
border-radius: 0;
border-left: none;
border-right: none;
}
.navbar-default .navbar-brand {
color: #f5f5f5;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #999999;
}
.navbar-default .navbar-nav > li > a {
color: #f5f5f5;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
background-color: red;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #333333;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #333333;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #f5f5f5;
border-bottom-color: #f5f5f5;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-link {
color: #f5f5f5;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
.navbar-default .nav > li {
border-right: 1px solid #FFFFFF;
}
.navbar-default .nav > li:last-child {
border-right: none;
}
.navbar-default .navbar-nav > li > a {
font-size: 90%;
font-weight: bold;
padding: 12px 24px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
outline: none;
}
.navbar-nav {
background: #53001e;
border: 1px solid #FFFFFF;
border-radius: 7px;
float: right;
margin-top: -20px;
}
So, Can I get any help from professionals here to get this work out without using any image?
This is the way I have tried it.
Any idea would be highly appreciating.
Thank You.
You can use shadow property on :hover (browsers that support it):
I made few changes in your jsBin:
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
outline: none;
-webkit-box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
-moz-box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
}
So you can play around with this property if you're OK with IE>=9.0
in html:
<div class="navbar navbar-default">
in variable.less file:
#navbar-default-bg: #f8f8f8;
After change this hex colour to other colour(ie. blue), you will notice that only bottom edge colour change to blue. because the class navbar has background too, it block the #navbar-default-bg colour.
Sample:
1.in html:
<div class="navbar navbar-default">
in variable.less:
#navbar-default-bg: blue;
Output:
2.in html:
<div class="navbar navbar-default">
in variable.less:
#navbar-default-bg: blue;
in custom.css:
.navbar{background: blue}
Output:
I know that if I make a custom css file and put .navbar{background: blue} it will change the navbar color to what I want.
But I prefer to edit less file. is there any way to do that?
Try on your end first before you think this is a duplicate question!
Try removing the default bootstrap-theme.css and bootstrap-theme.min.css files from your project as I think they over-ride some of the styles in the main bootstrap.css files.
I think your question is duplicate still. I think your conclusion above is not right.
When i set #navbar-default-bg: blue;(in variables.less) and rebuild the css (Bootstrap). <div class="navbar navbar-default"> will give me a blue navbar like:
The .navbar class don't set a background color neither it does influence the background color of your navbar-default class.
At the moment you will always have to add a second class to the .navbar (like navbar-default, navbar-inverse or navbar-custom) class for styling the navbar. See also: https://github.com/twbs/bootstrap/issues/10332
After setting #navbar-default-bg: blue; and recompile bootstrap the css for .navbar-default will look like:
.navbar-default {
background-color: #0000ff;
border-color: #0000de;
}
.navbar-default .navbar-brand {
color: #777777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777777;
}
.navbar-default .navbar-nav > li > a {
color: #777777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #dddddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #0000de;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777777;
}
.navbar-default .navbar-link:hover {
color: #333333;
}
Note blue will be set to #0000FF;