I'm trying to make the current page's title change colour in the navigation bar that I have at the top of my website. The navbar is built in html with:
<div class="navbar">
<a href="index.html" class="active" >Home</a>
Indian
Italian
</div>
and the CSS that attempts to style it is:
.navbar{
overflow: hidden;
background-color: #F5861F;
width: 100%;
}
.navbar a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:active{
color:#ffe7d1;
}
.navbar a:visited{
color:#8b4e14;
}
.navbar a:hover{
color:#874404;
font-size:20px;
}
.navbar a:current{
color:#ffe7d1;
}
The .navbar a:current is left there after I read that active may not do as I hope (I changed class="active" to class="current") but this also doesn't work.
What am I missing here?
try this
a.active {color: red}
a:active is not representing a class but a selector for a pseudoclass of <a> element
https://www.w3schools.com/css/css_pseudo_classes.asp
:active is where the mistake is.
Try this
.navbar a.active{
color:#ffe7d1;
}
Related
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}
a:-webkit-any-link{
text-decoration: none !important;
}
/*Navigation*/
.nav ul {
margin: 0;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: .5em;
color: white;
text-decoration: none;
}
.main-nav {
text-align: center;
font-size: 1.1em;
border-bottom: 1px solid rgba(255, 255, 255, .3)
}
.nav a:hover {
background-color: rgba(255, 255, 255, .3)
}
.search-container{
position: fixed;
top:3rem;
right:0;
}
#search-container a{
text-decoration: none;
}
<header class="main-header">
<nav class="main-nav nav">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>ABOUT</li>
<li>FANS</li>
</ul>
</nav>
</header>
<section class="search-container" id="search-container">
<input type="text" id="search-text" placeholder="Search..">
<p id="feedback"></p>
<a href="/store?category=music" >MUSIC</a>
<a href="/store?category=merch" >MERCH</a>
CART
</section>
So I have those links in an EJS file and I want them to not have underline. In the same file I have some <nav class="nav"><li>Link</li></nav>that I easily wrote
.nav a {
text-decoration: none;
}
and it works like charm. But somehow those below just won't!
<section class="search-container" id="search-container">
<a href="/store?category=music" >MUSIC</a>
<a href="/store?category=merch" >MERCH</a>
CART
</section>
I tried googling and various methods. Check out what I've tried:
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}
a:-webkit-any-link{
text-decoration: none !important;
}
#search-container a{
text-decoration: none;
}
None of the above works, and I see it was the
a:-webkit-any-link {
text-decoration: underline;
}
always showing up. But judging from any above code, they should have been overwritten, shouldn't they?
In the end I tried the inline style such as:
CART
It finally works. Fyi,
1. the style.css is properly linked, otherwise the nav links won't work nor do other styles.
2. The problem appears in both Chromium and Firefox on Linux.
3. I tried Snippets but it can not duplicate my problem at all.
4. I did use a lot of techniques, such as adding id, or even !important, but none seems to overwrite the stubborn a:-webkit-any-link { text-decoration: underline; }.
I just wonder why is this happening?
I decided to copy my css and repaste it back. Somehow it works now and I no longer need the inline-style. No idea but it solved the problem!
In my case cursor pointer was not showing when the <a> tag didn't have href or [routerLink] defined (navigation was actually done on click event and router.navigate()).
I defined empty [routerLink]="" and the cursor pointer is now shown and navigation isn't affected. (This wasn't the case with using empty href="" instead).
Also worth mentioning, adding [routerLink] to element other than <a> wouldn't get me the cursor as href does. Adding cursor: pointer to the styling of an element did the thing locally but wasn't working when deployed to server.
<a>doesnt't have a cursor pointer</a>
has a cursor pointer
<a [routerLink]="" (click)="navigate()">has a cursor pointer</a>
I have read at least 5 other questions and tried the answers, and other similar questions and answers and tried to adjust the code to fit in with mine but it just won't work.
The code is for an eBay product description, so it cannot contain any script/active content.
All I need is for my header links to change to black when hovered over. It is not a list.
I do have a list navigation in a sidebar and I managed to produce the hover effect on that just fine with the following css:
nav ul li a {
color: #ffffff;
text-decoration: none;
margin-left: 2%;
}
ul li a {
display:block;
}
ul li a:hover, ul li a:focus {
color: #000000;
}
The HTML code for the Header Nav Links I need to add the hover to is:
<body>
<div id="mainwrapper">
<header>
<div id="logo">
<img src="https://lorempixel.com/400/200" alt="Store logo">
<nav>
About Us
FAQ
Contact Us
Feedback
Add to Favourites
</nav>
</div>
</header>
</div>
</body>
The CSS for this is:
#mainwrapper header nav {
/*Nav bar containing links in header */
background-color: #8fb2d5;
text-align: right;
padding-top: 45px;
padding-bottom: 12px;
padding-right: 1%;
width: 50%;
float: left;
color: #ffffff;
}
header nav a {
/* Links in header */
padding-right: 2%;
}
I have already tried adding the following:
header nav a:hover, header nav a:focus {
color: #000000;
}
and
header nav a:hover{
color: #000000;
}
Any help would be much appreciated. I apologise if this is a repeat post but I have looked at other questions/answers with no luck so far.
Is this what you need?
#mainwrapper header nav a:hover {
color: black;
}
<div id="mainwrapper">
<header>
<div id="logo"><img src="http://www.saltdepot.co.uk/ebay/himalayan/BlogPostAssets/images/logo3.png" alt="Himalayan Salt Store">
<nav>About Us FAQ
Contact Us
Feedback
Add to Favourites</nav>
</div>
</header>
</div>
Try to use #mainwrapper header nav a:hover as a selector, that has more specifity.
I am working on a navigation bar Active color on my navigation bar is not working.Hover is working fine but not the active.In when from browser i select toogle element state and click on active browser change the color on clicking active state but in normal condition its not working.i am stucked and very confused , can someone help me please ? Thanks in advance.
.main-nav {
color: #FFF;
width: 100%;
background-color: #5e2d91;
float: right;
line-height: 42px;
margin-top: -3px;
}
.main-nav ul li {
display: inline;
padding: 0px 10px;
}
.main-nav ul li a {
color: #FFF;
text-decoration: none;
padding: 20px 14px;
}
.main-nav ul {
margin-bottom: 7px !important;
}
.main-nav ul li a:hover {
background-color: #0098aa;
}
.main-nav ul li a:active {
background-color: #0098aa;
}
<nav class="main-nav">
<ul>
<li> Home
</li>
<li> Trade Now
</li>
<li> Transactions
</li>
<li> Performance
</li>
<li>History
</li>
<li class="time">US Markets Open in <span id="hm_timer" class="style colorDefinition size_sm">08:05:35</span> hours</li>
</ul>
</nav>
your code working fine on fiddle there is might be some other css overwriting your code
try this
body .main-nav ul li a:active{
background-color:#0098aa;
}
if its not works try adding important // not recommended
body .main-nav ul li a:active{
background-color:#0098aa!important;
}
I recommend you to inspect element on that link and check active state, there might be some other css overwriting ur code
In your code, the background-color for :active is same as hover, so it's working but you can't see it. Change it to some other color and it would work.
In case of your website, I don't see any CSS selector as :active. Are you sure you've written it there?
In your site marketinthepocket.com you have mentioned background color as white. changing for color will work out.
body .main-nav ul li a:active {
background-color: red;
}
I am trying to get a little graphic to designate which page the viewer is on with css, but it just won't highlight. Here is my code:
HTML:
<ul class="side-nav">
<li><span>Home</span></li>
<a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
<span>Sample Page</span></li></a>
</ul>
CSS:
ul.side-nav span{
margin-left: 50px;
text-decoration: none;
color: #fff;
}
ul.side-nav a li{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
list-style: none;
height: 41px;
width: 250px;
line-height: 2.0;
text-decoration: none;
}
ul.side-nav a li:hover{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
ul.side-nav a li.current-menu-item{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;
}
Seems straightforward, but I just can't get the background to change. I know its because its the li element, but I guess the "current-menu-item" order is wrong.
Url : http://cieloazulsantafe.com/nav-test.html
Thanks in advance.
You will have to name the body (give it an id) and the li tags, and refer to them respectively in your css. This is the easiest, pure css way.
HTML
<body id="home-body"> // ... on your home page
...
<body id="about-body"> // ... on your about page
Your nav
<li id="home-menu">Home</li>
<li id="about-menu">About</li>
CSS
body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }
You might want to have a look at my answer I provided on the following question: How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?
EDIT: This is the "pure css" way; but depending on your needs, there might be other ways down this road.
CHECK THIS FIDDLE http://jsfiddle.net/luckmattos/aN2ny/
Your HTML and CSS were broken:
HTML
<ul class="side-nav">
<li>Home</li>
<li class="current-menu-item">Current</li>
</ul>
<a> has to be inside the <li>, put the text properties on the <a>. Most important you forgot to put the class current-menu-item on the current <li>.
CSS
ul.side-nav {
margin-left: 50px;
text-decoration: none;
padding:0px;
list-style: none;
width: 250px;
}
ul.side-nav li{
padding:0px;
margin:0px;
display:block;
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
height: 41px;
cursor:pointer;
}
ul.side-nav li a {
margin:0px;
display:block;
padding-left:50px;
text-decoration:none;
color: #fff;
height:41px;
line-height:41px;
}
ul.side-nav li a:hover,
ul.side-nav li.current-menu-item {
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
There are several minor changes, take a look at the code.
PS:
If you look closely at the bar when your hovering over a link a few pixels at the far right side stay black. Why is that and how do I fix it?
The code for the current Navigation bar is as follows:
HTML:
<body>
<div class="navbar">
-home
about
store
contact
</div>
</body>
CSS:
.navbar{
width: 75%;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 15px;}
.navbar a:link, a:visited{
background-color: black;
color: white;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;
font-weight: bold;
font-family: verdana;
font-size: 37px;
text-align: center;
padding-left: 5px;
padding-right: 5px;}
.navbar a:hover, a:active, a:focus{
background-color: #4A4A4A;
text-decoration: underline;}
#current a:link, a:visited{
background-color: red;}
As you can tell by the code, I'm trying to set the color of the home link to red. But this obviously didn't work. How should I go about it?
current is the id of the link element, so #current {background-color:red;} should do.
Now you're trying to set the color of the link element inside the element with id current.
Change your CSS rule from :
#current a:link, a:visited{
background-color: red;}
to
#current {
background-color: red;}
jsFiddle example
Your rule specifies the element with an ID of #current and then the child links of it when just #current is enough.
You forgot comma after #current in your CSS. You don't need rest of line. Also you can write either #current only or a#current.
Your CSS is incorrect.
#current a:link
this is saying style a link INSIDE an element with an Id #current
however your link IS the element with the id, try this:
a#current { color: red; }
It would better better to use a class though:
a.red { color: red; }
and then:
<a class="red">bla</a>
The main issue, as everyone has indicated is that the element that you are trying to change #current is also the anchor tag, so you have to say a#current:link or #current instead of #current a:link since the anchor tag is not a child of the #current tag.
Here's my jsFiddle, if you're interested.