0

my application is built on Yii2 and bootstrap 4. I used a Bootstrap 4 "TheEvent" Theme (1 page) and managed to customize it into my multiple page website, but I've been stuck for days on the "Active" state menu. The "menu-active" state just won't change on whichever navigation menu I clicked. I've tried many solution I found here but none works.

Here's my navigation menu HTML :

        <ul class="nav-menu">
          <li class="menu-active"><a href="index">Home</a></li>
          <li><a href="about">About</a></li> 
          <li><a href="news">News</a></li>
          <li><a href="cabang">Cabang</a></li>
           <li><a href="contact">Contact</a></li>
           <?php if(Yii::$app->user->isGuest)   {  ?>
          <li><a href="login">Login</a></li>

This is the JS in my layout file :

<?php
$script = <<< JS
$(document).ready(function() {

    $(document).on('click', '.nav-menu a', function (e) {
        $(this).parent().addClass('menu-active').siblings().removeClass('menu-active');
    });
});

JS;
$this->registerJs($script)

?>

This is part of the main.js of the theme that I found relevant to the "menu-active" state :

// Smooth scroll for the menu and links with .scrollto classes
  $('.nav-menu a, #mobile-nav a, .scrollto').on('click', function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      if (target.length) {
        var top_space = 0;

        if ($('#header').length) {
          top_space = $('#header').outerHeight();

          if( ! $('#header').hasClass('header-fixed') ) {
            top_space = top_space - 20;
          }
        }

        $('html, body').animate({
          scrollTop: target.offset().top - top_space
        }, 1500, 'easeInOutExpo');

        if ($(this).parents('.nav-menu').length) {
          $('.nav-menu .menu-active').removeClass('menu-active');
          $(this).closest('li').addClass('menu-active');
        }

        if ($('body').hasClass('mobile-nav-active')) {
          $('body').removeClass('mobile-nav-active');
          $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
          $('#mobile-body-overly').fadeOut();
        }
        return false;
      }
    }
  });

These are the JS asset. Most of them have something to do with animation, so I think it's irrelevant to the active-menu state

'lib/easing/easing.min.js',
'lib/superfish/hoverIntent.js',
'lib/superfish/superfish.min.js',
'lib/wow/wow.min.js',
'lib/venobox/venobox.min.js',
'lib/owlcarousel/owl.carousel.min.js',
'contactform/contactform.js',
'js/main.js'

I even deleted all the "main.js" file to see if my code will works, but it's still the same. The "menu-active" keep staying on my "home"/index menu.

Thank you in advance!

codejunkie
  • 67
  • 11
  • you should provide more details about what assets are included on your page – Muhammad Omer Aslam Apr 11 '19 at 11:01
  • also does it calls the event when you click on the anchor links , try adding `console.log()` inside the event to see if it is being called – Muhammad Omer Aslam Apr 11 '19 at 11:03
  • Also the html structure and classes for the nav you have added donot look like a bootstrap4 default classes and structure there isnt any `.nav-bar`, `.nav-item` or `nav-link` classes in your menu. – Muhammad Omer Aslam Apr 11 '19 at 11:08
  • @Muhammad Omer Aslam Hi Muhammad, I add the asset in my initial post. As for the log, I found that my registered JS code was successfully logged when I click the menu link but strangely soon disappeared as it seems to refresh the page according to my chosen menu. I think this is the problem. Whenever the menu is clicked, the page was kind of refreshing itself to display the view according to the chosen menu, so the menu-active state returned to its original state on INdex/home. – codejunkie Apr 11 '19 at 15:49
  • There's a verbose in my console : `[Violation] Forced reflow while executing JavaScript took 35ms` I don't know if this will help. My menu still won't change the menu-active to another li. Do you have any solution? Thanks – codejunkie Apr 11 '19 at 15:49
  • @MuhammadOmerAslam It's not a full-page refresh, though. The nav-menu remain not being reloaded/refreshed. Only the content was. Except when I was idled for like 20 minutes and then when I click on the menu, it refreshed the menu once. After that when I went to another menu it doesn't reload again. Repeat. Is it normal or is it cache or anything related? – codejunkie Apr 12 '19 at 00:46
  • add the code the way you are using it not in the chunks as you have provided , you should have used the `Nav` and `NavMenu` classes to integrate your menu rather than copy pasting the html and js javascript – Muhammad Omer Aslam Apr 12 '19 at 06:44
  • I finally solved this using PHP instead of JS to give the `li` tag the required `menu-active` class – codejunkie Apr 15 '19 at 07:31

0 Answers0