Heading formatting

HTML-CSS
1

Hi All,

I’m trying to put the finishing touches to my portfolio page and am having trouble with my header line.

I want the navigation tabs positioned at the bottom of the header bar and I want a sticky header row, but can’t seem to get either of these things to work. I can’t seem to target the “header” div using CSS either and I’m unsure why.

Any help is much appreciated.

Thanks!

2

Remove the link in your css pane and move that into Settings.

Then adjust your header as follows:

.header {
  position: fixed;
  background-color: #afafaf;
  width: 100%;   // need this for div to cover the entire width of page
  z-index: 99;   // need this so your header stays on top of your content 
}

There are still some issues (now content is hidden underneath), but I leave that to you.

3

Thanks for that, I’ve read a few posts about content being hidden but couldn’t get the sticky to work in the first place. I’ll try and fix that issue now.

Just out of interest, why was having the external font link in the CSS stopping me from targeting the header class?

4

The CSS pane in codepen is like your .css file. So have a css link reference there is an invalid code.

You need to move that css reference link to the head section of your html page…
or in codepen use the System → Add external stylesheets