Active Nav Link

I designated server.js as the main file. I am hoping to add distinct CSS styles to router links that are active. I attempted to achieve this using the default router-link-active class, but it was unsuccessful. One possible solution is to utilize Angular 2’s built-in attribute that can be added to any link that is used with it. By doing so, Angular will recognize the current active route and apply the specified router-link-active class.


Question:

I have been attempting to comprehend the concept of adaptable designs.

I am unable to identify the issue with the
active link
on the
nav bar
as it appears to be malfunctioning.

It is desired that the navigation bar reflects the currently active page by highlighting it. The page that is presently active is the home page, and the background color currently displayed is grey. However, it is preferred for the highlighted background to be orange.

It would be highly valued if the code could be examined by someone.


HTML

:




    
        Responsive Layout
        
        
        
    

    
Logo


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;
}


Solution 1:

It appears that you are attempting to target the ‘active’
menu button
with this CSS code.

.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;
}

Your target is the elements that have the class

mainHeader

, however, the class of your

<header>

element is

main-header

.

To ensure everything is functional, substitute every instance of

.mainHeader

with

.main-header

in your CSS.


Solution 2:


Assign the name “navigation” to a class in your

nav

.

then in css add,

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

Let me know how you get on.

Frequently Asked Questions

Posted in Css