Bootstrap li item remeins highlighted in white after visited
I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<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 class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active"><a href="#1">Home</a></li>
<li class ="nav-btn"><a href="#2">About Us</a></li>
<li class ="nav-btn"><a href="#3">Our projects</a></li>
<li class ="nav-btn"><a href="#4">Cooperation</a></li>
<li class ="nav-btn"><a href="#5">Services</a></li>
<li class ="nav-btn"><a href="#7">Contacts</a></li>
<li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
</ul>
</div>
</div>
</nav>
In the code above instead of MyEmail link I have my real email. This is the only item that remains highlighted after being visited. I am sure it has something to do with the bootstrap navbar as I have another element with same link mailto and it works fine.
If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/
you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.
Thanks in advance!
html css twitter-bootstrap-3
add a comment |
I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<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 class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active"><a href="#1">Home</a></li>
<li class ="nav-btn"><a href="#2">About Us</a></li>
<li class ="nav-btn"><a href="#3">Our projects</a></li>
<li class ="nav-btn"><a href="#4">Cooperation</a></li>
<li class ="nav-btn"><a href="#5">Services</a></li>
<li class ="nav-btn"><a href="#7">Contacts</a></li>
<li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
</ul>
</div>
</div>
</nav>
In the code above instead of MyEmail link I have my real email. This is the only item that remains highlighted after being visited. I am sure it has something to do with the bootstrap navbar as I have another element with same link mailto and it works fine.
If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/
you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.
Thanks in advance!
html css twitter-bootstrap-3
Please create a plunker or jsfiddle example and paste here so we will get exact clarity.
– Laxminarayan
Nov 16 '18 at 8:58
try.my-mail a:visited {background-color: transparent;}
– Manish Patel
Nov 16 '18 at 8:59
1
Also explain what exactly you mean by “after being visited”. Are you talking about the:focus
style here? (.nav>li>a:focus {background-color: #eee}
fromnav.less
Bootstrap stylesheet.)
– misorude
Nov 16 '18 at 9:00
1
created example: jsfiddle.net/borovec/aq9Laaew/272810
– boandriy
Nov 16 '18 at 9:05
add a comment |
I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<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 class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active"><a href="#1">Home</a></li>
<li class ="nav-btn"><a href="#2">About Us</a></li>
<li class ="nav-btn"><a href="#3">Our projects</a></li>
<li class ="nav-btn"><a href="#4">Cooperation</a></li>
<li class ="nav-btn"><a href="#5">Services</a></li>
<li class ="nav-btn"><a href="#7">Contacts</a></li>
<li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
</ul>
</div>
</div>
</nav>
In the code above instead of MyEmail link I have my real email. This is the only item that remains highlighted after being visited. I am sure it has something to do with the bootstrap navbar as I have another element with same link mailto and it works fine.
If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/
you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.
Thanks in advance!
html css twitter-bootstrap-3
I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<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 class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active"><a href="#1">Home</a></li>
<li class ="nav-btn"><a href="#2">About Us</a></li>
<li class ="nav-btn"><a href="#3">Our projects</a></li>
<li class ="nav-btn"><a href="#4">Cooperation</a></li>
<li class ="nav-btn"><a href="#5">Services</a></li>
<li class ="nav-btn"><a href="#7">Contacts</a></li>
<li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
</ul>
</div>
</div>
</nav>
In the code above instead of MyEmail link I have my real email. This is the only item that remains highlighted after being visited. I am sure it has something to do with the bootstrap navbar as I have another element with same link mailto and it works fine.
If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/
you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.
Thanks in advance!
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<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 class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active"><a href="#1">Home</a></li>
<li class ="nav-btn"><a href="#2">About Us</a></li>
<li class ="nav-btn"><a href="#3">Our projects</a></li>
<li class ="nav-btn"><a href="#4">Cooperation</a></li>
<li class ="nav-btn"><a href="#5">Services</a></li>
<li class ="nav-btn"><a href="#7">Contacts</a></li>
<li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
</ul>
</div>
</div>
</nav>
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<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 class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active"><a href="#1">Home</a></li>
<li class ="nav-btn"><a href="#2">About Us</a></li>
<li class ="nav-btn"><a href="#3">Our projects</a></li>
<li class ="nav-btn"><a href="#4">Cooperation</a></li>
<li class ="nav-btn"><a href="#5">Services</a></li>
<li class ="nav-btn"><a href="#7">Contacts</a></li>
<li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
</ul>
</div>
</div>
</nav>
html css twitter-bootstrap-3
html css twitter-bootstrap-3
edited Nov 16 '18 at 9:04
boandriy
asked Nov 16 '18 at 8:50
boandriyboandriy
231214
231214
Please create a plunker or jsfiddle example and paste here so we will get exact clarity.
– Laxminarayan
Nov 16 '18 at 8:58
try.my-mail a:visited {background-color: transparent;}
– Manish Patel
Nov 16 '18 at 8:59
1
Also explain what exactly you mean by “after being visited”. Are you talking about the:focus
style here? (.nav>li>a:focus {background-color: #eee}
fromnav.less
Bootstrap stylesheet.)
– misorude
Nov 16 '18 at 9:00
1
created example: jsfiddle.net/borovec/aq9Laaew/272810
– boandriy
Nov 16 '18 at 9:05
add a comment |
Please create a plunker or jsfiddle example and paste here so we will get exact clarity.
– Laxminarayan
Nov 16 '18 at 8:58
try.my-mail a:visited {background-color: transparent;}
– Manish Patel
Nov 16 '18 at 8:59
1
Also explain what exactly you mean by “after being visited”. Are you talking about the:focus
style here? (.nav>li>a:focus {background-color: #eee}
fromnav.less
Bootstrap stylesheet.)
– misorude
Nov 16 '18 at 9:00
1
created example: jsfiddle.net/borovec/aq9Laaew/272810
– boandriy
Nov 16 '18 at 9:05
Please create a plunker or jsfiddle example and paste here so we will get exact clarity.
– Laxminarayan
Nov 16 '18 at 8:58
Please create a plunker or jsfiddle example and paste here so we will get exact clarity.
– Laxminarayan
Nov 16 '18 at 8:58
try
.my-mail a:visited {background-color: transparent;}
– Manish Patel
Nov 16 '18 at 8:59
try
.my-mail a:visited {background-color: transparent;}
– Manish Patel
Nov 16 '18 at 8:59
1
1
Also explain what exactly you mean by “after being visited”. Are you talking about the
:focus
style here? (.nav>li>a:focus {background-color: #eee}
from nav.less
Bootstrap stylesheet.)– misorude
Nov 16 '18 at 9:00
Also explain what exactly you mean by “after being visited”. Are you talking about the
:focus
style here? (.nav>li>a:focus {background-color: #eee}
from nav.less
Bootstrap stylesheet.)– misorude
Nov 16 '18 at 9:00
1
1
created example: jsfiddle.net/borovec/aq9Laaew/272810
– boandriy
Nov 16 '18 at 9:05
created example: jsfiddle.net/borovec/aq9Laaew/272810
– boandriy
Nov 16 '18 at 9:05
add a comment |
2 Answers
2
active
oldest
votes
Try this
.nav >li>a:focus {
background-color: transparent;
}
Thanks! that solved the problem!
– boandriy
Nov 16 '18 at 9:30
add a comment |
I think you just need to set css for :focus
like..
li a:focus {
background-color: rgba(0,0,0,0) !important;
border:none !important;
}
Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.
– boandriy
Nov 16 '18 at 9:33
Using!important
is not recommended. If required increase the specificity of your selector.
– James Coyle
Nov 16 '18 at 9:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334331%2fbootstrap-li-item-remeins-highlighted-in-white-after-visited%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this
.nav >li>a:focus {
background-color: transparent;
}
Thanks! that solved the problem!
– boandriy
Nov 16 '18 at 9:30
add a comment |
Try this
.nav >li>a:focus {
background-color: transparent;
}
Thanks! that solved the problem!
– boandriy
Nov 16 '18 at 9:30
add a comment |
Try this
.nav >li>a:focus {
background-color: transparent;
}
Try this
.nav >li>a:focus {
background-color: transparent;
}
answered Nov 16 '18 at 9:17
Prameshwar KumarPrameshwar Kumar
574
574
Thanks! that solved the problem!
– boandriy
Nov 16 '18 at 9:30
add a comment |
Thanks! that solved the problem!
– boandriy
Nov 16 '18 at 9:30
Thanks! that solved the problem!
– boandriy
Nov 16 '18 at 9:30
Thanks! that solved the problem!
– boandriy
Nov 16 '18 at 9:30
add a comment |
I think you just need to set css for :focus
like..
li a:focus {
background-color: rgba(0,0,0,0) !important;
border:none !important;
}
Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.
– boandriy
Nov 16 '18 at 9:33
Using!important
is not recommended. If required increase the specificity of your selector.
– James Coyle
Nov 16 '18 at 9:34
add a comment |
I think you just need to set css for :focus
like..
li a:focus {
background-color: rgba(0,0,0,0) !important;
border:none !important;
}
Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.
– boandriy
Nov 16 '18 at 9:33
Using!important
is not recommended. If required increase the specificity of your selector.
– James Coyle
Nov 16 '18 at 9:34
add a comment |
I think you just need to set css for :focus
like..
li a:focus {
background-color: rgba(0,0,0,0) !important;
border:none !important;
}
I think you just need to set css for :focus
like..
li a:focus {
background-color: rgba(0,0,0,0) !important;
border:none !important;
}
edited Nov 16 '18 at 9:33
James Coyle
3,70811130
3,70811130
answered Nov 16 '18 at 9:28
J. AliceJ. Alice
212
212
Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.
– boandriy
Nov 16 '18 at 9:33
Using!important
is not recommended. If required increase the specificity of your selector.
– James Coyle
Nov 16 '18 at 9:34
add a comment |
Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.
– boandriy
Nov 16 '18 at 9:33
Using!important
is not recommended. If required increase the specificity of your selector.
– James Coyle
Nov 16 '18 at 9:34
Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.
– boandriy
Nov 16 '18 at 9:33
Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.
– boandriy
Nov 16 '18 at 9:33
Using
!important
is not recommended. If required increase the specificity of your selector.– James Coyle
Nov 16 '18 at 9:34
Using
!important
is not recommended. If required increase the specificity of your selector.– James Coyle
Nov 16 '18 at 9:34
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334331%2fbootstrap-li-item-remeins-highlighted-in-white-after-visited%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please create a plunker or jsfiddle example and paste here so we will get exact clarity.
– Laxminarayan
Nov 16 '18 at 8:58
try
.my-mail a:visited {background-color: transparent;}
– Manish Patel
Nov 16 '18 at 8:59
1
Also explain what exactly you mean by “after being visited”. Are you talking about the
:focus
style here? (.nav>li>a:focus {background-color: #eee}
fromnav.less
Bootstrap stylesheet.)– misorude
Nov 16 '18 at 9:00
1
created example: jsfiddle.net/borovec/aq9Laaew/272810
– boandriy
Nov 16 '18 at 9:05