Mi pregunta es básicamente lo que dice el título. ¿Que habría de hacer para dejar marcada la opción de menú de la página en la que me encuentro?
Mi código es este:
HTML
<nav class="nav-principal navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-principal" aria-expanded="false" aria-label="Mostrar navegacion">
<span class="navbar-toggler-icon"></span>
</button>
<a href="index.php" class="navbar-brand d-lg-none mx-2">Accion Reaccion</a>
<div class="col-12 mt-4">
<div class="collapse navbar-collapse" id="nav-principal">
<ul class="nav nav-justified flex-column flex-sm-row">
<li class="nav-item">
<a class="nav-link" href="index.php">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="conocenos.php">Conócenos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="obras.php">Obras</a>
</li>
<li class="nav-item">
<a class="nav-link" href="galeria.php">Galería</a>
</li>
<li class="nav-item">
<a class="nav-link" href="premios.php">Premios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacto.php">Contacto</a>
</li>
</ul>
</div><!--div menu-->
</div><!--div menu-->
</nav><!--.nav-principal-->
Y el CSS:
/** Estilos menú **/
.navegacion {
background-color: #000000;
position: relative;
}
.navbar-toggler {
background-color: white;
}
@media (min-width: 575px){
.flex-sm-row {
width: 100%;
}
}
.bg-faded {
background-color: solid;
}
.navbar-brand {
color: white!important;
font-weight: bold;
text-transform: uppercase;
}
nav.nav-principal .nav-item {
transition: background-color .5s ease-in-out;
}
nav.nav-principal .nav-item .nav-link:hover {
background-color: white;
border-radius: 0.2rem;
color: black;
font-weight: bold;
text-transform: uppercase;
border-bottom:0px solid white;
}
nav.nav-principal .nav-item .nav-link {
font-size: 1rem;
text-transform: uppercase;
color: #ffffff;
padding: 0rem;
margin: 0rem;
border-bottom:1px solid white;
}
Muchas gracias de antemano