Help on my Portfolio on codepen.io

Hello,

I can’t display fully my profile picture (rounded) when my Navbar is set top navbar-fixed-top.

https://codepen.io/theoask/pen/KoaEbW

How can I insert some space at the top of the page so that visitors can see my full picture please?

Otherwise what do you think of my Portfolio so far?

How can I insert a button with my CV attached? (can we load a file in the webpage with Javascript ?or do I have to link to an external cloud hosting service?)

The goal is that visitors when they click on “Download my CV” can automatically download my CV in PDF format and then it opens in Microsoft Word or Libre Office

Try this:

.header + div {
  padding-top: 72px;
}

This uses an adjacent sibling selector. It means that, if a div element occurs directly after an element with the class header, that div will have top padding of 72px. That pushes its contents down far enough to avoid being obscured by the fixed navigation.

Here’s a pen: https://codepen.io/raddevon/pen/dmzMdy

That’s a quick fix, but a better fix would be to inspect the markup of the Bootstrap fixed navigation example page and mirror its markup with your own page. Bootstrap is already built to handle this, but because you’ve gone off-script with the markup, the styles don’t apply properly to your page.

If you could mirror that markup, you wouldn’t have to apply any custom styles to make sure your avatar is fully displayed.