En realidad, tengo que mostrar la barra inferior a la página actualmente activa. Estoy usando el operador ternario en PHP. La barra inferior se muestra pero su ancho horizontal es un poco extra. No he podido reducir su ancho. Aquí hay una foto de eso:
https://i.stack.imgur.com/9mWRJ.png
Aquí está el operador ternario que usé:
<ul class="navbar-nav me-auto mb-2 ms-auto mb-lg-0"> <li class="{{'/' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('home')}}">Home</a> </li> <li class="{{'novels' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('novels')}}">Novels</a> </li> <li class="{{'about' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('about-us')}}">About Us</a> </li> <li class="{{'contact' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('contact-us')}}">Contact Us</a> </li> </ul>Aquí está el css:
.nav-item { border-bottom:3px rgb(0, 0, 0) solid; margin-bottom: 19px; }En primer lugar, el problema no está en la lógica de PHP (más bien en el motor de plantillas Smarty o Blade). El problema está en su definición de CSS. Estableces el borde de tus elementos <li> .
Solución propuesta
Utilice el nav-item la clase css para todos sus <li> en la sección de la barra de navegación. Porque todos estos elementos <li> en su barra de navegación describen un elemento de navegación independientemente del hecho de que la página actual sea igual a uno de ellos o no.
Utilice más bien una clase adicional como current para marcar el elemento de navegación de la página real. Lo hice por ti.
<ul class="navbar-nav me-auto mb-2 ms-auto mb-lg-0"> <li class="nav-item {{'/' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('home')}}">Home</a> </li> <li class="nav-item {{'novels' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('novels')}}">Novels</a> </li> <li class="nav-item {{'about' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('about-us')}}">About Us</a> </li> <li class="nav-item {{'contact' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('contact-us')}}">Contact Us</a> </li> </ul>Entonces deberías usar la siguiente definición de CSS:
.nav-item.current a.nav-link{ border-bottom:3px black solid; padding-bottom: 10px; } upvote a favor y accept esta respuesta, si resuelve su problema.
Aquí hay una captura de pantalla de mi solución:
No puedo leer ni probar tu código. Es posible que necesitemos el código donde declaró el espacio entre su nav-item (li) ; sin embargo, si el espacio entre ellos es causado por padding-right , entonces cámbielo a margin-right , u obtenga ese aspecto de flex gap ; deberia de funcionar.
//no changes needed in this code .nav-item { border-bottom:3px rgb(0, 0, 0) solid; margin-bottom: 19px; }