-2

When a link is clicked on, the active class should be added to the menu that was clicked on so that it's highlighted. I'm not able to get this behaviour, so when i click on any link only the first one remains highlighted. Must be missing something and i can't pin point it. Here's my code

<ul class="navbar-nav ml-auto">
<li class="nav-item active">
    <a class="nav-link" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="about">About</a>
</li>
</ul>
Rob
  • 14,746
  • 28
  • 47
  • 65
Mena
  • 1,873
  • 6
  • 37
  • 77

2 Answers2

1

I edited this because I found a similar post with a working answer on it.

Follow this link. It has to deal with bootstrap 3 but it works with 4 too.

Also read and make sure you use correctly this link.

First of all make sure you have correctly included the stylesheet and script of bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Secondly, make sure that the active class is not overrided by the nav-link or fa class that you are using inside the <li></li> element.

Try to add a new list item to your code and see if it works:

<li class="active"><a href="https://stackoverflow.com/">Stack Overflow</a></li>

If it is not try to create a new class that contains the stylesheet of the active class and use !important. Then add it to your element:

i.e. .myclass{ padding-top: 100px !important; }

If any of the above works make sure that when you are Styling your html/php file you are always Inspecting your project through your browser. There you can add or remove css formats and see the exact style of your element.

Alcaeus D
  • 258
  • 3
  • 18
  • Also make sure that your libraries, scripts and stylesheets are on the top of your html/php file. – Alcaeus D Jan 18 '18 at 12:04
  • I think this question is tagged with `bootstrap-4`. Have you missed that? – WebDevBooster Jan 18 '18 at 12:07
  • Thank you for the notice. Yes i missed that. – Alcaeus D Jan 18 '18 at 12:08
  • So, now that you are aware of it you don't feel any need to edit your post, do you?? – WebDevBooster Jan 18 '18 at 12:41
  • @WebDevBooster spent your time on StackOverflow so you can help others or learn something from them. If you are not willing to provide an answer/comment to a post that fits in as a solution or guides the one that asked it, then get out of here. You did 4 comments about criticizing other people's comment/answer. Improve your self first. This is not facebook. – Alcaeus D Jan 19 '18 at 08:51
1

May be your page is being reloaded after clicking on the link or redirecting to other link. The redirection will bring your link to initial state. Otherwise there may be some javascript issue with your code.

Ashish Joshi
  • 19
  • 4
  • 1
    This is a comment, not an answer to the question. Do not put comments in the Answer section. Please delete this. – Rob Jan 18 '18 at 12:21
  • @Rob It's impossible to post comments with a reputation score less than 50. There seem to be quite a few of you mods you don't know this simple fact... – WebDevBooster Jan 18 '18 at 12:31
  • 1
    @WebDevBooster We know this simple fact and it is done that way for a reason that people like you don't seem to be aware of. – Rob Jan 18 '18 at 12:32
  • @Rob OK, what's the point of your comment then?? That user has a reputation score of 1. I had also got such comments when my rep. score was under 50. – WebDevBooster Jan 18 '18 at 12:34
  • To let the poster know 1) why his comment will soon be deleted and 2) a hint that he should have paid attention when he signed up for SO when he was told he should "Take the Tour" and read the Help Center. Apparently you still haven't. – Rob Jan 18 '18 at 12:35
  • @Rob This is what you are saying NOW and that would have been helpful to the user. But definitely NOT your first comment. That one is just pointless and annoying. – WebDevBooster Jan 18 '18 at 12:38