Currently, I am developing a basic website using ASP.NET/MVC with Razor (.cshtml). As I am relatively new to CSS, I am interested in customizing the appearance and style of my site. After inspecting the source of the homepage, I find myself struggling to target and style different elements on the page. The HTML structure is as follows:
<div id="navigator">
<div class="container">
<div class="row">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="/">Home</a></li>
<li><a href="/Consultancy">Consultancy</a></li>
<li><a href="/Products">Products</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contacts">Contacts</a></li>
</ul>
</div>
</div>
</div>
I aim to ensure that all <li> items within my navigator class have a consistent rendering, with the active item highlighted in orange. However, I am finding it challenging to identify the correct method for targeting this component with CSS. Here is the CSS code I currently have:
html, body {
margin: 0;
padding: 0;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #7c7c84;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
}
.container {
margin: 0 auto;
max-width: 1200px;
padding: 0 10px;
}
.header {
text-align: center;
text-transform: uppercase;
height: 60px;
background: rgba(0, 0, 0, 0.3);
padding: 0 10px;
}
.header h1 {
text-align: center;
margin: 10px 0;
}
#navigator li {
color: #fff;
display: inline-block;
font-size: 18px;
text-align: center;
padding: 5px 5px;
margin: 0;
transition: background .5s;
}
#navigator li:hover {
background-color: #4072B4;
box-shadow:0px 1px 6px rgba(0, 0, 0, 0.6);
border-radius:0;
color: #fff;
padding: 5px 5px;
text-decoration: none;
transition:box-shadow 0.25s;
cursor: pointer;
}
#navigator a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#navigator a:hover {
color: #fff;
background-color: #4072B4;
cursor: pointer;
}
#navigator .active {
color: #FF6500;
}
Visit the jsfiddle link for more details: https://jsfiddle.net/Camuvingian/noupqauw/
If you have any advice on how to effectively highlight the .active list item, please share your insights. Thank you for your time.