my problem is similar to this one. I want to disable focus feature from links in navigation bar.
The links:
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>First</li>
<li>Second</li>
</ul>
I've added the outline style that is supposed to turn off that feature:
<style>
.nav-link {
color: #888888;
}
.nav-link:hover {
color: black;
}
.nav-link:focus {
outline:none;
}
.active {
color: black;
}
</style>
But it's still working in unwanted way:
(the blue effect)
I do not want to set color of it since in my case any (black or 888888) wouldn't be correct, just want to disable this behaviour.
For sure it is .nav-link:focus because changing outline:none; to color:red; blue focus changes to red one.
What I have tried:
outline: none;
outline: 0;
outline: 0 !important;
outline: 0 none !important;
and similar.
The whole header code (after setting color: initial and outline: thin dotted;) :
.nav-link {
color: #898989;
}
.nav-link:hover {
color: black;
}
.nav-link:focus {
outline: thin dotted;
text-decoration: none;
color: initial !important;
}
.active {
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<header class="p-3 text-bg-light">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>First</li>
<li>Second</li>
</ul>
</div>
</div>
</header>
I believe setting the color to initial on your focus state should solve the issue:
.nav-link:focus {
color: initial
}
This answer on a previous question shows more of what you can do to reset the default browser styles for the anchor element.
Related
I am want my active link to be red:
nav class="navbar navbar-inverse">
<div class="container col-1 col-sm-12">
<ul class="nav">
<li class="<%= 'active' if current_page?(squad_path) %>"><%= link_to("squad", squad_path)%></li>
<li class=" <%= 'active' if current_page?(album_path) %>"><%= link_to("album", album_path)%></li>
...
When I inspect the page, the li tag is active but doesn't change the color on the site. The hover is working fine changing by color.
This is my CSS code:
.nav li a{
display: inline-block;
padding-right: 8px;
padding-left: 8px;
color: #fff;
margin-bottom: 3px;
margin-top: 3px;
font-size: 40px;
font-family: "Germanica";
}
.nav li a:hover{
text-decoration: none;
color: #ff0000;
background-color: black;
}
.nav li .active a {
color: #ff0000 !important;
}
Still, when I want to change the background color - it works. Just doesn't change color of the text.
You can do:
.nav li.active a {
color: #ff0000;
}
This way you can also get rid of the !important because it is more specific than the other rules
Ok, I just worked it out one moment later. I deleted "li" from the css line and it worked. Probably because .active is the class name of that li tag.
.nav .active a {
color: #ff0000 !important;
}
Hope it will help somebody else.
I'm using bootstrap for my project and I done some mofigication with my own CSS file. however I need to change bootstrap nav-bar right side items selected color. No matter how hard I tried it want change with my CSS file
.navbar-static-top{
background-color: #3498db;
}
.navbar-brand
{
font-family: 'Lato', sans-serif;
color:white;
font-size: 190%;
}
body {
font-size: 9px;
}
table-hover{
background-color: #FFF;
}
thead th {
color: #FFF;
text-align: Left;
background-color: #3498db;
font-size: 11px;
}
tbody td {
height: 20px;
padding: px px;
font-size: 11px;
text-align: right;
}
.vertical-center {
background-color: #FFF;
}
.input-sm {
font-size: 12px;
color: black;
}
input[readonly] {
background-color: #fff;
/* any other styles */
}
.nav li{
padding-right:10px;
font-size: 120%;
color: #FFF;
}
.nav.navbar-nav.navbar-right li a {
color: #FFF;
font-size: 120%;
}
.input-sm {
height: 25px;
padding: px px;
font-size: 12px;
}
#submitbtn{
align: center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Leave Application</a>
<ul class="nav navbar-nav">
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li >My Leaves</li>
<li class="active">Application</li>
</ul>
</div>
</nav>
and this is sample image how my site currently appeared in browser Link
I want change this gray color to white color with black text for selected item. how can I do this ?
First of all make sure you are loading your custom css after bootstrap, otherwise it wont override it.
Secondly make sure that your css rules points to DOM element exactly the same or more specific then bootstrap does.
Personally I prefix parent node with my own id or class and refer to it in my css. This guarantees me that I always use more specific css declarations then bootstrap does.
But if it doesn't makes sense to you you can simply use !important after your css proporty, but I recommend avoiding it at all costs unless you exactly know that there is no other way
May be the problem here with the linking your external css file and bootstrap file
you need place to them like this
so that browser read the last css update from the file.
now, try this.
just add below code to your CSS.
.navbar-default .navbar-nav > .active > a {
background: #000000;
color: white;
}
Please try this:
nav.navbar .navbar-collapse ul.navbar-right li.active a {
color: #000;
background: #fff;
}
As you provided the code it is working on codepen.
I think, the problem is css file not linked in HTML page.
I have an issue, I am trying to add 1 px to an underlined text, but researching a lot on the web I found that the only way was adding a border and a padding bottom
But the width is longer than the word and I want that the effect is the same form a underline effect, cropped with the word width.
Here is my fiddle
https://jsfiddle.net/0orb5h4s/1/
And my try to the selected underline class
/* Underline Issue */
.selected {
border-bottom: 1px solid #000;
/* text-decoration: underline; */
padding-bottom: 1px;
}
I think a span here is what you are looking for:
.horizontal-tabs li {
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
}
.horizontal1,
.horizontal2 {
border-left: 1px solid #000;
}
/* Underline Issue */
.selected span {
text-decoration: underline;
}
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected"><span>Shipping Information</span>
</li>
</ul>
</div>
If you are actually looking to distance the underline from the text then you previous technique still works if you use the span as mentioned before.
.horizontal-tabs li {
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
}
.horizontal1,
.horizontal2 {
border-left: 1px solid #000;
}
/* Underline Issue */
.selected span {
border-bottom: 1px solid #000;
padding-bottom: 1px;
}
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected"><span>Shipping Information</span>
</li>
</ul>
</div>
If you add a span inside your li elements you could use the border style on the span element instead. I edited your fiddle code and removed some unnecessary classes that you were using for setting the border-left style.
HTML
<div class="tabs">
<ul class="horizontal-tabs">
<li><span>Description</span></li>
<li><span>Product Care</span></li>
<li class="selected"><span>Shipping Information</span></li>
</ul>
</div>
CSS
.horizontal-tabs li {
display: inline-block;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
border-left: 1px solid #000;
}
/* This removes the first border */
.horizontal-tabs li:first-child {
border-left: none;
}
/* Underline Issue */
.horizontal-tabs li.selected span {
border-bottom: 1px solid #000;
padding-bottom: 1px;
display: inline-block;
}
JSFiddle
Here is an answer - https://jsfiddle.net/0orb5h4s/6/
Just added
.selected span {
border-bottom: 1px solid #000;
}
and
<li class="horizontal2 selected"><span>Shipping Information</span></li>
and removed the bottom border from the selected li.
The border applies to the padding as well and that's why adding a span moves the border to the content inside the padding.
Why don't you add a span?
HTML
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected">
<span>Shipping Information</span>
</li>
</ul>
</div>
CSS
.selected span {
border-bottom: 1px solid #000;
padding-bottom: 5px;
}
You can check my solution here: https://jsfiddle.net/lordfox/0orb5h4s/4/
Hope that helps! :)
So for some reason, my hover CSS is not working. I am using bootstrap with some of their css. Is there something wrong with my code, or is it because bootstrap's code is overriding mine's?
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" role="tablist">
<li class="active">Home</li>
<li>HTML</li>
<li>CSS</li>
<li>About</li>
</ul>
</div>
</nav>
CSS
ul>li>a {
color: black;
padding: 15px;
}
ul>li>a:hover {
background-color: #B0B0B0;
color: red;
}
It's because the default Bootstrap styling is more specific.
These are the selectors that you need to override:
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #333;
background-color: transparent;
}
Therefore you could use:
Working Example Here
.navbar-default .navbar-nav>li>a:hover {
background-color: #B0B0B0;
color: red;
}
Without seeing exactly whats going on, the issue you're having may be related to not specifying a class on your unordered list.
This may fix the problem:
ul.navbar-nav > li > a {
color:black;
padding: 15px;
}
ul.navbar-nav > li > a:hover {
background-color: #B0B0B0;
color:red;
}
I am trying to make a dropdown with the properties of navbar-inverse and on hover. I have the on hover problem fixed, it is the navbar-inverse I can not figure out. I have searched the internet and found if you used this code
.inverse-dropdown {
background-color: #222;
border-color: #080808;
&>li>a{
color: #999;
&:hover{
color: #fff;
background-color: #000;
}
}
}
it would make the dropdown color what I wanted, but the text remained very hard to see. I have tried changing the color tag to make the text what I wanted but it did not change anything. With that code my dropdown looks like this:
As you can see if you look at the image, the text is hard to read. Can someone please help me I have been trying to do this for days.
For reference this is all code that goes with the dropdown:
HTML:
<li class="dropdown">
<i class="fa fa-group"></i> Our Staff
<ul class="dropdown-menu inverse-dropdown text-center">
<li>Employee Login</li>
</ul>
</li>
CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
.inverse-dropdown {
background-color: #222;
border-color: #080808;
&>li>a{
color: #999;
&:hover{
color: #fff;
background-color: #000;
}
}
}
I found this:
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open
.dropdown-menu {
background-color: #222;
color:#fff;
}
Also, could it be that the color you see is the "visited" version of the link? Could you post your whole navbar?
.dropdown-menu.menu-inverse {
background-color: #222;
border-color: #080808;
}
.dropdown-menu.menu-inverse li > a {
color: #9d9d9d !important;
}
.dropdown-menu.menu-inverse ul > li > a:hover {
color: #fff;
background-color: #000;
}
.dropdown-menu.menu-inverse li.divider {
background-color: #000;
}
This CSS is just compiled version of LESS from #CalmKai's answer (which is straight off the GitHub issue).
My apps show the username in the top navbar, so inverse for it too:
.navbar-inverse #appMenuUsername {
color: #9d9d9d
}