CODEWITHSUNDEEP
javascriptphplaravelfrontendnavigationbar
CodeNew
CodeNew

Reputation: 49

Highlight the current page on navbar in php laravel web application

Guys help me out... i'm trying to highlight the current page when clicked on the navbar menu option. i tried javascript code, php codes and laravel help still couldn't figure it out. Kindly please help me.. 

<script>
window.addEventListener('scroll', event => { 
    let nav = document.querySelector('.nav-container'); 

    (window.scrollY >= 510) ? nav.classList.add('scroll') : nav.classList.remove('scroll');
});

     $(document).ready(function () {
        $("#tab-content li a").each(function(){
            //set all menu items to 'black
            $(this).css("color","white");

            var linkPath=$(this).attr("href");
            var relativePath=window.location.pathname.replace('http://'+window.location.hostname,'');

            //set the <a> with the same path as the current address to blue
            if(linkPath==relativePath)
                $(this).css("color","gray");
        });
});
    </script>



<main id="main"> 

   <!-- Header -->  
   <!-- Navigation -->
   <header>

    <div class="nav-container">
        <nav class="nav-checkbox">
        <a href="#" class="nav-logo">sample company</a>
            <input type="checkbox" id="tab-nav" class="tab-nav">
            <label for="tab-nav" class="tab-nav-label">Menu</label>
            <ul class="tab-content" id="tab">
                <li ><a class="active" href="{{ url('/') }}">Home</a></li>
                <li><a href="{{ ('/testimonials') }}">Testimonials</a></li>
                <li><a href="{{ url('/services') }}">Services</a></li>
                <li><a href="{{ url('/team') }}">Team</a></li>
                <li><a href="{{ url('/blog') }}">Blog</a></li>
                <li><a href="{{ url('/about') }}">About Us</a></li>
                <li><a href="{{ url('/contact') }}">Contact Us</a></li>
            </ul>
        </nav>
     </div>
  </header>  
</main>

Upvotes: 1

Views: 565

Answers (1)

Karthik Sekar
Karthik Sekar

Reputation: 637

Replace below code and add your CSS to "active" class. JS not required.

<li><a class="{{Request::is('/') ? 'active' : ''}}" href="{{ url('/') }}">Home</a></li>
                <li><a class="{{(Request::is('testimonials') || Request::is('testimonials/*')) ? 'active' : ''}}" href="{{ ('/testimonials') }}">Testimonials</a></li>
                <li><a class="{{(Request::is('services') || Request::is('services/*')) ? 'active' : ''}}" href="{{ url('/services') }}">Services</a></li>
                <li><a class="{{(Request::is('team') || Request::is('team/*')) ? 'active' : ''}}" href="{{ url('/team') }}">Team</a></li>
                <li><a class="{{(Request::is('blog') || Request::is('blog/*')) ? 'active' : ''}}" href="{{ url('/blog') }}">Blog</a></li>
                <li><a class="{{(Request::is('about') || Request::is('about/*')) ? 'active' : ''}}" href="{{ url('/about') }}">About Us</a></li>
                <li><a class="{{(Request::is('contact') || Request::is('contact/*')) ? 'active' : ''}}" href="{{ url('/contact') }}">Contact Us</a></li>

Upvotes: 1

Related Questions