Home link is active on all my pages

[jordanC4m]

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....?

[BenPleysier]

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.

[ALsp]

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]

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.

[ALsp]

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]

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.

[Nancy OShea]

ALsp  wrote

The rule of thumb should be to give the original poster the most complete answer possible...

No.   The OP said they used Bootstrap.  A Bootstrap solution is all that is required here.  IMO, your reply is off topic and only confuses the discussion with info that was never asked for.

[osgood_]

Back up a bit. I think a more comprehensive answer was required, Bootstrap or no Bootstrap. Its correct, in my opinion, to point out a more economical solution than to apply a class 'manually' to each page.

The OP can then make up their own mind about what solution they choose to use and if as they pointed out they have no idea about what css to look for well maybe Bootstrap is not a good fit, unfortunstely it gets jammed down their necks by not only you but Adobe.

The answer provided is not even that correct as it targets the a tag and it should be the li tag and no dropdown is even mentioned by the OP so thats just been hastily copied and pasted from some resource without much consideration.

[Nancy OShea]

Ben posted the jQuery code to automatically change classes on respective pages. IMO, that's the correct answer.   

I'm not jamming anything down anybody's necks.

I'm also not going to get into another senseless debate about the pros & cons of Bootstrap.  If DW users want Bootstrap, that's their choice not yours.  And you must respect that decision even if you don't agree with it.  

[osgood_]

But that was only AFTER Al had posted that the initial response the OP received wasnt necessarily the most optimised or best solution, regardless if Bootstrap is being used or not. As he wasnt going to answer a Bootstrap centric question he suggested that those who  DO use it might and if they didnt other more suitable options for beginners are available.

Well if you dont want to get into another senseless debate about the use of Bootstrap youre not exactly going about it the right way by posting something that flames the situation when no one in this thread has said anything against it other than alternative solutions are available if required.

[ALsp]

I think someone spilled a large jug of crazy sauce on this forum. Thank you, Osgood. You are correct, I posted what I posted and deferred to folks more familiar with Bootstrap in order for the original posted to get the twenty-first century version of a current page link highlighter. Apparently, the overwhelming need to strike out, obscured that little FACT.

[ALsp]

Are you serious? That is totally irrelevant. My initial response was a simple reminder that a Bootstrap "expert" should provide a means to automate current page highlighting. It's the right thing to do. That is the only possible way my post should have taken - barring any other social experiments conducted.