I'm using the latest version of Bootstrap 3.
Inside my navbar I have:
<div class="collapse navbar-collapse" id="topnav-navbar">
<ul class="nav navbar-nav navbar-right">
<li>Text</li>
</ul>
I would like to change navbar background colour and link colour.
I've created the following Sass code (SCSS syntax).
.navbar {
background: #2C3E50;
.navbar-nav li a {
color: #eee;
&:hover {
color: #18BC9C;
}
}
}
It's working almost fine, but when I click on link (not on hover) for a split second I'm getting my link in gray colour with border/box shadow (on hover and on out everything looks as it should).
The question is - what class to use to remove border/shadow and use colour I defined? I've tried a while and achieved nothing. It's really hard for me to guess what class to use to achieve effect I want.
You need to include :focus and :active too like this:
.navbar {
background: #2C3E50;
.navbar-nav li a {
color: #eee;
&:hover, &:focus, &:active {
color: #18BC9C;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
}
Related
I am styling a navbar using CSS to modify the .navbar-inverse within Bootstrap 3.
My current HTML:
<li class="dropdown">
<a class="dropdown-toggle hvr-glow" data-toggle="dropdown" href="#">My Sites
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LinkedIn</li>
<li>Github</li>
<li>CodeSandbox</li>
</ul>
I want the to change the color of the link tag that says "My Sites" when I hover over it. Currently, when I hover the link it changes to the same color as the background, which is the color that the other links are supposed to be when hovered over... I do not want to change the hover effect of the other links.
My current CSS for the navbar is:
#banner{
width: 100%;
}
.navbar-brand{
letter-spacing: 3px;
color: #FDFFFC !important;
background-color: #011627 !important;
}
.navbar-brand:hover{
color: #E71D36 !important;
}
.navbar{
background-color: #011627 !important;
border: none !important;
}
.navbar-nav a{
color: #FDFFFC !important;
}
.navbar-nav a:hover{
color: #2EC4B6 !important;
}
.dropdown-menu{
background-color: #FF9F1C !important;
}
.dropdown-menu a:hover{
color: #011627 !important;
background-color: #FF9F1C !important;
}
.dropdown-toggle{
background-color: #2EC4B6 !important;
}
.navbar-inverse .navbar-nav > .active > a:hover{
color: #011627 !important;
}
Picture:
CSS next to my page. I am hovering the link that I cannot target
Try adding this?
.dropdown .dropdown-toggle:hover {
color: red;
}
and obviously change red in the hover to whatever color you want. Also you should only really use !important when its necessary, even for bootstrap where it is used a lot, you seem to be using it a little too much.
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.
I'm trying to change the color when I click on the button of nav-pills, actually i want to delete this action, when i click, something like that:
Img Link: http://i.stack.imgur.com/PuoYX.png
(because i can't post image yet)
In the "stream" button, this happens when i click it, but i want nothing to happen, or at least change to the same as my hover action.
html:
<div class='navizinha'>
<ul class="nav nav-pills nav-stacked">
<li><a href='#'>Início</a></li>
<li><a href='#'>Inscrição</a></li>
<li><a href='#'>Stream</a></li>
<li><a href='#'>Tabela</a></li>
<li><a href='#'>F.A.Q</a></li>
</ul>
</div>
and my css:
.nav-pills a {
color: #ffffff
}
.nav-pills a:hover {
color: #560000;
border-radius: 0px;
}
.nav-pills .active a:hover {
color: #560000;
border-radius: 0px;
}
If I understand you correctly, you also need to target the :focus state via CSS, like this:
.nav>li>a:hover,
.nav>li>a:focus {
text-decoration: none;
background-color: #560000;
}
Working Example
More about the focus state on CSS-Tricks
Or you can give this a try
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
background-color:yourBgColor;
color:yourLinkColor;
}
From this link
I am unable to add the active tab color to the menu code, can any body help me in this regard. I have collected the css horizontal code from form following tutorial:
http://www.freemenu.info/2013/04/menu.html
Apart from the hover color, I want another color for the active page. Please help me.
#menu a{
display: block; padding: 5px 10px;
width: 100px; border-right: 2px solid #ffffff;
text-decoration: none; border-left: 10px solid #1958b7;
color: #fff; background: #2175bc;
}
#menu a:hover{
color: pink; background: #2586d7;
border-left: 10px solid #1c64d1;
}
How
Create an active class for your links (just add the class to your :hover CSS):
#menu a:hover,
#menu a.active {
....
}
Now you you have links like: Link
Was that the question?
You can do that with javascript/JQuery, (API Reference):
$('#menu a').click(function(){
$(this).addClass('selected');
//Remove class for other menu items.
});
and then more CSS:
#menu a.selected{
background: red;
}
this is what I used to do:
<li class="active">HOME</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
change that active for all the pages.
Then in my CSS:
.active{
//Your code goes here
}
I have created a navbar using an unordered list. Here is my problem:
I cannot change the color of the text of the list items and for some reason I cannot click my links anymore (I was able to click them a while ago in development, no idea when they stopped working).
Here is what the items look like now:
http://gyazo.com/c089ed3f21368d4d2a1d91a52e129222.png
HTML:
<div class="grid_16 alpha" id="header">
<ul id="nav" class="grid_4 prefix_1">
<li id="nav_home">Home</li>
<li id="nav_home">News</li>
</ul>
</div>
CSS:
#nav {
color:white;
margin-top: 54px;
}
#nav li {
color: white;
display: inline;
}
#nav a:link {
font-family: ColaborateThinRegular;
font-size: 18px;
text-decoration: none;
background-color: #353535;
padding: 5px 20px;
margin-right: 15px;
color: white;
box-shadow: 1px 1px 3px #000;
}
Found it:
look at this jsFiddle. the problem with the coloring occured because you didn't specify a:visited as well as a:link so the color was purple.
The non-clickable problem.. has something to do with href="#" or some other code on your site that prevents it.. I've linked one of the buttons in jsFiddle to google and it keeps working after first click. Try it out
After visiting the link your style stops working. Try implementing this:
#nav a:visited {color: white;}
Always remember ids are Unique.