Skip to main content
jordanC4m
jordanC4m
Participant
December 28, 2018
Question

Home link is active on all my pages

  • December 28, 2018
  • 3 replies
  • 895 views

Hi Guys

I have created a responsive website using Bootstrap and Dreamweaver, at the beginning everything was fine but as I’ve created new pages. I have noticed that the home button is active/over on all pages. Instead of just when I’m on the home page only. I’m only just learning to code, but I have tried to find the relevant code for my menu bar but to no avail.

I am assuming this is a coding issue am I right....?

This topic has been closed for replies.

3 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
December 28, 2018

This is probably not part of your question, but because it was brought forward, if you have an included navbar, then the following script will do the job.

jQuery(document).ready(function($){

  var url = window.location.href;

  $('a.nav-item, a.dropdown-item').map(function() {

    $(this).toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);

  });

  $('a.dropdown-item.active').map(function() {

    $(this).closest('.nav-item.dropdown').find('.dropdown-toggle').toggleClass('active');

  });

});

If you do not know what I am on about in this reply, you can safely forget it.

I think that off the cuff remarks are clouding the issue.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    ALsp
    ALsp
    Legend
    December 28, 2018

    Off the cuff? I was trying to be helpful. Current page marking is not unimportant. Please cease with the personal barbs. Your response to the original poster was helpful. Leave it at that.

    ALsp
    ALsp
    Legend
    December 28, 2018

    Well, at least Teodor from DMX Zone/Wappler found your post helpful. Actually it was helpful... but would not have been made had I not mentioned automatic current page highlighting. So, yay me.

    The rule of thumb should be to give the original poster the most complete answer possible, and since we are all human, when you fail to do that, for whatever reason, be happy when someone else pitches in.

    And I sincerely hope you and Teodor had a very happy Christmas.

      ALsp
      ALsp
      Legend
      December 28, 2018

      You might want to look into a dedicated menu system with auto current page highlighting. Setting an active class on each page is rather tedious... though it will work. It could, however, be a problem if you manage your navigation with includes or even with Dreamweaver DWT.

      You can see if someone knowledgeable about Bootstrap chimes in with an automated solution or you can google jQuery menus or, if you'd prefer an extension that installs into Dreamweaver and gives you an automated UI from which to build and manage a menu, you can type into Google:

      responsive web design extensions for Dreamweaver

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      December 28, 2018

      Assuming that you have placed the navbar on each page, change the active class on the menu item. For example

      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav">
         <li class="nav-item active">
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
         <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
         <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item">
         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
         </li>
         </ul>
        </div>

      If this were the navbar for the Pricing page, remove the active class from where it is and place it on the nav-item for Pricing.

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices