0

I store my navigation in a separate nav.blade.php file and call it into each page using the @include('includes.nav') function. This works great but I lose the ability to highlight the current page.

I've tried adding some some of the code which others have described here How to make css a:active work after the click? but I keep getting lost. I am new to coding and missing something, I need a step by step guide! I think this will help others using bootstrap navs too.

Here's my nav.blade.php which is called into all pages using @include('includes.nav')

<style>
    .navbar {
        padding: 10px;
        font-size: 1.15rem;
        font: "Helvetica Neue";
        /* font-family: "Helvetica Neue", Helvetica, Arial; */
    }

    li {
        float: left;
        text-decoration: none;
        padding: 0px;
        list-style-type: none;
    }
</style>

<!-- Navbar START  -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
    <a class="navbar-brand" href="/">sitename.com </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <!-- Left Navbar Links -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="welcome">Group Listings</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/contact">Contact</a>
            </li>
        </ul>
        <!-- Right Navbar Links -->
        <ul class="navbar-nav ml-auto">
            @guest
            <li class="nav-item pr-3">
                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
            </li>
            @if (Route::has('register'))
            <li class="nav-item">
                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
            </li>
            @endif
            @else
            <li class="nav-item dropdown">
                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                    {{ Auth::user()->name }} <span class="caret"></span>
                </a>

                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">

                    <!-- <a class="dropdown-item" href="{{ route('profile') }}">My Profile</a> -->
                    <a class="dropdown-item" href="{{ route('home') }}">Dashboard</a>


                    <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
                        document.getElementById('logout-form').submit();">
                        {{ __('Logout') }}
                    </a>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </div>
            </li>
            @endguest
        </ul>
    </div>
</nav>
<!-- Navbar END  -->

Here's an example of one of my web pages which illustrates the problem

    <head>
    @include('includes.head')
    </head>
    <body>

    <h1>Page content</h1>

    <p>This page calls the navigation from a separate page called head.blade.php. In that page I have a nav with many link, non of which are active. If I make one of them active, then all pages on my website will show that one page as active.</p>

    </body>
    </html>```

1 Answers1

0
  1. Add some extra code to your navigation link
<ul class="navbar-nav mr-auto">
   <li class="nav-item">
       <a class="nav-link @if(Request::is('welcome')) active @endif" href="welcome">Group Listings</a>
  </li>
  <li class="nav-item">
       <a class="nav-link @if(Request::is('about')) active @endif" href="/about">About</a>
  </li>
  <li class="nav-item">
       <a class="nav-link @if(Request::is('contact')) active @endif" href="/contact">Contact</a>
  </li>
</ul>
  1. Put this between the <head> </head> tags on all your webpage 
 @if(Request::is('route-name')) active @endif"
Dino Numić
  • 1,414
  • 2
  • 9
  • 17
  • Thank you, but where do I put this code? I am really new and find myself getting into a mess of code! –  Sep 28 '19 at 12:53
  • No worries. You put it on your a tags that you want to make active. I actually copied your link to about page. I'll update my answer with more code. – Dino Numić Sep 28 '19 at 13:08
  • The thing is, I can make a tab active by simply writing ```active``` in the standard bootstrap nav link. But since I have one nav for all pages, and my actual web pages have no nav, there is no place to add code to a tab! If I add code to a nav link on my navigation, it is then shown on all pages at once. –  Sep 28 '19 at 13:19
  • I've added an example of one of my web pages in description which illustrates the problem. –  Sep 28 '19 at 13:26
  • With the code above, none of the links would be active unless the current route matches as it adds the ```active``` class conditionally. Have you tried it? – Dino Numić Sep 28 '19 at 13:30
  • it works! Thank you so much. I misunderstood your instructions (my fault) but it works perfectly. –  Sep 28 '19 at 13:41
  • awesome to hear that mate. – Dino Numić Sep 28 '19 at 13:42
  • Would you please look at this question I just posted please? https://stackoverflow.com/questions/58147073/keep-page-active-on-non-default-nav-bar-whilst-using-an-include-nav-function –  Sep 28 '19 at 14:09