Menu items not marked as active

Alright i will do like that next time. But publish button also uploads the file…so its fine.

I do have another issue on my menu, if you look at the link i provided earlier…
Active state is not switching when clicked on other pages. Shall i open another separate issue for this or …

My header ins php include…file there i just added links for each page.

Your navigation menu js file is only on the index.php page.
It must be on every page, as it is required for the active states.

<script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script>

Great it worked well :slight_smile: every page we create do we need to add this script each time?

Well, maybe you could just move the js in the PHP include, where your navigation code is.

This is how my header include has…

<!-- Wappler include  appconnect="local" bootstrap4="cdn" jquery_slim_33="cdn"-->
<header class="bg-info">
      <div class="container bg-info">
        <div class="row bg-info">
          <div class="col bg-info">
            <nav class="navbar navbar-expand-lg navbar-dark justify-content-between bg-info">
              <a class="navbar-brand mr-auto ml-auto" href="../index.php">WEBONMASTER</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">
                <div class="navbar-nav">
                  <a class="nav-item nav-link active" href="../index.php">HOME</a>
                  <a class="nav-item nav-link" href="../services.php">SERVICES</a>
                  <a class="nav-item nav-link" href="../aboutus.php">ABOUT US</a>
                  <a class="nav-item nav-link" href="../contactus.php">CONTACT US</a>
                </div>
              </div>
              <div class="navbar-nav justify-content-end d-none d-lg-flex ml-md-auto">
                <a class="nav-item nav-link" href="#"><i class="fa fa-slack"></i></a>
                <a class="nav-item nav-link" href="#"><i class="fa fa-twitter"></i></a>
                <a class="nav-item nav-link" href="#"><i class="fa fa-facebook"></i></a>
              </div>
            </nav>      </div>
        </div>
      </div>
    </header>

do you want me to add that script above or below the header tag? which prefer best?

Just put it before the opening header tag.
And remove it from your pages.

2 Likes

Thanks : ) well it solved… appreciate your help…going to style up my slideshow, and keep working on the site… if anything get back to community…

1 Like