Embarrassingly small question

Embarrassingly small question
0

#1

I’m building my portfolio and I’ve ran into a frustrating problem. Small yet frustrating. The href all point to the name’s in my anchor tags that I’ve place throughout my page, but they’re so inaccurate. If possible I’d like to land so that the heading “Skillset” is visible when I click on “about”. In the same way, the headings of each section should be visible after navigating to them via the links in the nav bar. Can anyone hep me out here? I feel silly for asking such a simple question. Thank you anyone who is able to help.


#2

Hi! its because you are using a fixed header.

WRONG (but the common behavior):         CORRECT:
+---------------------------------+           +---------------------------------+
| BAR///////////////////// header | 90px;     | //////////////////////// header |
+---------------------------------+           +---------------------------------+
| Here is the rest of the Text    |           | BAR                             |
| ...                             |           |                                 |
| ...                             |           | Here is the rest of the Text    |
| ...                             |           | ...                             |
+---------------------------------+           +---------------------------------+

You should add a class on the anchor element with the topbar height as the padding-top value. For example if you header is 90px; your padding-top should also be 90px;

<h1><a class="anchor" name="barlink">Bar</a></h1>
.anchor { padding-top: 90px; }

#3

Thank you very much!!! :smiley:


#4

So I’ve ran into just more more problem with my layout. If you’re able to spare a few minutes to help me I would be extremely grateful. “Skillset” and “Contact” nav links are functioning correctly after I added some padding to the anchor class, but the “portfolio” section still doesn’t land correctly- I want it to land so that the blue top border for that particular section is align perfectly with the header, just like the other two. The one other problem is that after adding an anchor element to the contact section, that column no longer center aligns. Upon taking away the anchor element, the column is centered again as it should be. The other sections’ layout don’t respond this way to the anchor element, so it’s really throwing me for a loop.
EDIT: The very first section has a fairly big space between the end of the text and the following section, not really sure why. Could this somehow be related to the problem?


#5

For the portfolio, you can create another class e.g. anchor-portfolio and give it a bigger padding-top.

For the contact form you seem to have put the div on the second line inside an anchor tag, Remove it so it doesnt inherit the anchor tag’s css.

Note: This is from you code.

<a name="contact" class="anchor"> <!----THIS ANCHOR TAG --->
     <div class="col-sm-4 mx-auto">
          <div class="card-custom form-group">
            <div class="card-body patua text-center">
              <p>Got a question? Want a quote? Fill out the form below and I'll get back to you pronto!</p>
              <form action="mailto:[email protected]" method="post" enctype="text/plain">
                   Name:<br>
                  <input type="text" name="name" class="form-control"><br>
                  E-mail:<br>
                 <input type="text" name="mail" class="form-control"><br>
                Comment:<br>
                <input type="text" name="comment" class="form-control"><br>
                <input type="submit" value="Send" class="btn btn-dark">
            </form>
            </div>
          </div>
      </div>
    </a>

#6

nest all .anchor in its respective column and close them

<div class="row">
  <div class="col-sm-4 mx-auto">
    <a href="#" name="skillset" class="anchor"></a>
    <div class="card-custom"></div>
  </div>
</div>

.anchor { display: block; padding-top: 60px; }

#7