I am currently in the process of coding my own portfolio as part of my UX/UI program. My navigation bar is styled using the CSS code below:
.nav-links {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-column-start: span;
list-style-type: none;
font-family: eurostile, sans-serif;
font-size: 24px;
justify-items: center;
background-color: #7510f7;
margin-right: -10px;
margin-left: -10px;
margin-top: -10px;
padding: 15px;
}
.nav-item a {
text-decoration: none;
color: white;
font-weight: lighter;
}
Each navigation link corresponds to one column of the grid.
I am trying to find a way to change the background color of a specific column in the grid to indicate which page the user is currently on. Is this achievable through CSS? Alternatively, are there other methods I can use to show the user's current location?
Edit: Here is the HTML structure for the Navigation Bar:
<header>
<nav>
<ul class="nav-links">
<li class="nav-item"><a href="home.html">Home</a></li>
<li class="nav-item"><a href="contextual_inquiry.html">Contextual Inquiry</a></li>
<li class="nav-item"><a href="interaction_Design.html">Interaction Design</a> </li>
<li class="nav-item"><a href="skills.html">Skills</a> </li>
<li class="nav-item"><a href="about.html">About</a> </li>
</ul>
</nav>
</header>
Edit: A live version of the website has been deployed for better visualization: