Help with Portfolio's buttons and navigation

Hi everybody, I’m doing my Portfolio page and I’ve almost finished it. I just have few problems:

  1. The “Home” button is always “active”, whereas the others do not get activated. What is wrong and how do I fix it?
  2. How do I change the color of the shape when the button is active?
  3. When I click on the buttons in the navbar, I am sent to the correct place, but it goes a little bit more down and it can’t be seen the h2 statement. How do I resolve this?

Thank you all for the help!

1 Like

Hello there!

From what I can tell, the following are potential solutions to your problems:

  1. That’s because the current element for the home “button” has the Bootstrap active class <li class="active">. Removing that should solve the problem
  2. I believe that you require JavaScript to do that. If I’m not mistaken you haven’t done much of JavaScript yet, so I recommend revisiting that when you will have learned more about JavaScript
  3. This is documented in Bootstrap’s documentation if I remember correctly (I came across the same problem). If you are okay with having additional space before each of the section, the simplest fix is to apply the appropriate amount of padding-top to each of the section that the anchors are meant to take you to

More importantly, there many things that can be tidied up in your code and I strongly recommend reading the Grid System > Introduction section of the Bootstrap documentation carefully, as well as consulting the documentation whenever you use a new class.

A few more things:

  • If I’m not mistaken, you only use either of the Bootstrap container and container-fluid classes for a given section. They are not meant to be nested, too
  • There is a lot of in-line styling in the HTML, some of which are not even done with the style attribute. Consider moving them to the CSS so that you can manage them better. In particular, you should create a class for styles that you have used on several elements, one of such example is style="color: white"
  • The id attribute and class attribute can be applied to the same element—you don’t need to create separate <div>s for the anchors that way and the code will be much cleaner

I hope that helps! :slight_smile:

  1. Deleting it the “Home” button isn’t active but none activate when i click on it. Do you know how to solve this?
  2. I didn’t start javaScript yet.
  3. Solved, thanks!!

Now I am studying the grid system so as I can improve my code.
You also were right on container.

Thanks for the help :slight_smile:

I’m glad to see that you have fixed some of the things. :slight_smile:

With respect to your first point, toggling between active and inactive would still involve more than just HTML and CSS. If you really want to have it added now then you could try the following jQuery (you will have to enable jQuery under Settings > JavaScript > Quick-add:

Changes to HTML:

<li class="nav-custom"><a href="#Home">Home</a></li>
<li class="nav-custom"><a href="#About">About</a></li>
<li class="nav-custom"><a href="#Portfolio">Portfolio</a></li>
<li class="nav-custom"><a href="#Contact">Contact</a></li>

JavaScript (jQuery):

$(document).ready(function() {
  $(".nav-custom").on("click", function() {
    $(".nav-custom").removeClass("active");
    $(this).addClass("active");
  });
});

Please try to revisit and understand the code once you will have started learning JavaScript. :slight_smile:

I will do it when I’ll have studied javascript. Thank you for all the help!!!

1 Like