Portfolio Page - Disappearing element when applying a fixed position to a header style div?

#1

Hi all,

Relatively new to coding and am running into an issue that has me stumped when building my portfolio page.

The easiest way to see what I am talking about will be to visit my page and review the code I think.

Link: http://codepen.io/Will5592/pen/eByVYG?editors=1100

However, a brief description is: When I apply a style in my CSS named ‘.navbar’ that fixes the position of the element it’s applied to, in this case the very first div after my body tag, elements further down the page (entitled ‘contact’ and then a footer) completely disappear.

I have no idea why and can’t seem to fix it, so if anyone is able to shed some light on this issue, that would be great.

NOTE: I’ve left an extra ‘a’ in the style in CSS, so to apply it correctly just delete an ‘a’ and hit run. I’ve done this so you can see what is the before and after effect.

NOTE: I also have a border around every Div at the moment, just to help me visualise where the invisible elements are. If this is annoying/not useful please feel free to take it off.

If you need clarification on what I’m talking about please ask and I’ll try and explain in a different way.

Cheers!!

#2

You forgot the closing tag for <div class="navbar">

#3

All those nested <div>s can get tricky to keep track of. Some tips:

  • You can leave yourself comments in the code:

      <div class="col-xs-4">
        ...
      </div> <!-- close col>
    </div> <!-- close row>
  </div> <!-- close page>
  • In Codepen, you can select “Tidy HTML” from the drop-down menu beside “HTML” to automatically indent, and see if things line up
  • And (as in most editors) you can click the little arrows beside lines to collapse them. Collapse your divs from innermost to outermost and see if anything got left out!
  • In Codepen, keep an eye out for elements it highlights in red. Something’s wrong.
#4

Thanks both for your help!

I actually can’t believe it was as simple as that and I missed it. I’d even counted the divs and got it equal, but stupidly I think I assumed the first div opened had to be the last one closed.

Thanks for your help and advice, I think I’ll definitely start adding comments in the code to break it up a bit!

#5