CODEWITHSUNDEEP
htmlcssresponsive-design
user3043645
user3043645

Reputation: 31

Active Nav Link

I have been trying to get to grips with responsive layouts.

The active link on the nav bar does not appear to be working and I cannot see what I have done wrong.

I would like the navigation bar to highlight the current active page. In this case, the active page is the home page. At the moment it is displaying a grey background, however, I would like it to be orange.

It would be much appreciated if someone could take a look at the code.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Responsive Layout</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset ="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

<body class="body">
    <header class="main-header">
        <img src="Images/logo.gif" alt="Logo">
        <nav><ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul></nav>
    </header>


</body>

</html>

CSS:

body{
    background-image: url('Image/bg.png');
    color: #000305;
    font-size: 87.5%;
    font-family: Arial;
    line-height: 1.5;
    text-align: left; 
        margin: 0;
    padding: 0;
    }

a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited{
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;

}

a:hover, a:active{
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

.body{
    margin: 0 auto; 
    width: 70%;
    clear: both; 
}

.main-header img{
    width: 30%;
    height: auto; 
    margin: 2% 0;
}

.main-header nav{
    background: #666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px; 
}

.main-header nav ul{
    list-style: none; 
    margin: 0 auto;
}

.main-header nav ul li{
    float: left; 
    display: inline; 
}

.main-header nav a:link, .main-header nav a:visited{
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}
.main-header nav li a {
    border-radius: 5px;
}

.main-header img {
    width: 30%;
    height: auto;
    margin: 3% 0;
}

Upvotes: 0

Views: 7674

Answers (2)

DommT
DommT

Reputation: 155

Add a class to your nav, let's say "navigation"

then in css add,

.nav ul li a:current {
   //code here
}

Let me know how you get on.

Upvotes: -2

Nic Wortel
Nic Wortel

Reputation: 11423

This seems to be the piece of CSS where you try to target the 'active' menu button:

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}

You are targeting elements with a mainHeader class, but your <header> element has a class called main-header.

In your CSS, replace all occurences of .mainHeader with .main-header and everything should work.

Upvotes: 1

Related Questions