Active link won't stay active as per colour specified

Get Started
1

Hello all.

I am new around this forum as well as the world of html and CSS.

However and with so much out there to research (Google) I have managed to do a very nice, simple website for me.

Now I have a question. I have done today a lovely navbar to which I used CSS to make it look like buttons the links.

Then I added a:hover. It worked fine.

Then I added :active. It worked fine first time.

I was messing about with borders, margins, padding and now, what it was working before is no longer working.

I have redone the whole navbar from scratch following the youtube video I’d seen previously and this one feature does not work anymore.

I want the link/button, once clicked to stay active with the same background colour but it is just not happening anymore.

Here’s the code;

#nav_bar {
	font-family: Neuropol;
	font-size: 12px;
	color: #FFF;
	background-color: #333;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	height: 30px;
}
#nav_bar a {
	color: #FFF;
	text-decoration: none;
	display: block;
	float: right;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	height: 10px;
}
#nav_bar a:active {
	color: #FFF;
	background-color: #666;
}

#nav_bar a:hover {
	background-color: #666;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/nav_bar.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="nav_bar">
	<a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Services</a>
    <a href="#">Compare</a>
    <a href="#">eShop</a>
    <a href="#">Contact Us</a>
</div>
</body>
</html>

Any help as to why it is not working now is more then appreciated everybody.

After getting this done, it is to make the link/butons top corners rounded.

Cheers,
Albert, C

2

Hi albertc30! Welcome to SitePoint. :slight_smile:

Then I added a:hover. It worked fine.

Then I added :active. It worked fine first time.

First thing to note is that it’s better to have the hove and active styles the other way around:

#nav_bar a:hover {
    background-color: #666;
}

#nav_bar a:active {
    color: #FFF;
    background-color: #666;
}

I want the link/button, once clicked to stay active with the same background colour but it is just not happening anymore.

Could you clarify what you mean by “to stay active”? Do you mean on the next landing page?

The ideal way to do a menu is to us an <ul> with the <li>s floated or displayed inline. But anyhow, do you have a live link? It’s much easier to help you if we can see the real thing. :slight_smile:

3

A link is only active when the mouse is hovering over it with a mouse button depressed OR the link has the focus and the enter key is depressed.

As soon as you release the button or key the link is no longer active and so should go back to its hover or focus colour.

4

Hello.

Yes. I meant the next landing page.

At the moment I am using dummy links and it used to work first time round.

Live link here.

This one seems to be working with the exception that if you click anywhere on the page, the selected link that was gray will become black again. Is this normal?

Basicly I want the nav bar to look like folders. The whole nav is one colour. There is a hover colour and another colour, the same as the background so that it matches the background for the active page once the link it’s clicked.

Any help well appreciated.

Cheers,
Albert, C

5

Hello.

I meant active page for the nav bar to have a background the same colour as the page background. So I all current active page is what I am looking for.

Cheers.

6

Hello.

Yes. I want the button that I click to stay the same colour as the background. This way makes it look like my pages are arranged folder like.

Just like picture attached. Hope I have been more clear this time. Next I am aiming to do rounded corner top left and rignt only. Can it be done using CSS?

Cheers,
Albert, C

7

That isn’t something that can be done with CSS alone - it won’t look at the link destination and compare it with the current URL and see if they match.

You need to find some way of adding a class/ID to the appropriate link in the HTML itself. It depends what you’re using to build your menu (eg PHP, server-side includes, copy-and-paste into the raw source, a CMS, etc) as to what the best way of doing it is.

One option that works well enough, and doesn’t require any special code injection, is to put an ID on every link in the menu, and then put a class of the relevant name on the <body> for each page. You can then target the pairings with CSS, like:

.home #home,
.about #about,
.services #services,
.compare #compare,
.eshop #eshop,
.contact #contact
    {[I]white background, green text etc[/I]}
8

This is how I have got the links.

<div id="nav_bar">
  	<a href="contact_us.html">Contact Us</a>
    <a href="shop.html">Shop</a>
    <a href="#">Compare</a>
    <a href="#">Services</a>
    <a href="about_us.html">About Us</a>
    <a href="index1.html">Home</a>
  </div>

I can almost understand what you are saying but I would have to try it independantly on a new page to see how I would go about as mentioned before, I am not css or html programmer.

Cheers for your help.