Portfolio Challenge - navbar-fixed-top help please

#1

Hello, i’m just starting to get to grips with this challenge and have hit an early bump in the road.

With the navbar-fixed-top in place any subsequent content starts at the top of the page and therefore behind the nav bar. I undertand that this is because it is no longer part of the document flow.

I’ve been looking this up for a couple of hours now and nothing i’m trying seems to want to fix it.

For example, padding-top for the body is not making any difference that i can see and if i remove the fixed top everything is where i want it (i get document flow back) except the nav bar doesnt scroll.

I’m happy to do more research if somebody could be kind enough to steer me towards where I should be looking.

I feel i’m getting nowhere fast.

Thanks in advance.
Reno

#2

If you provide us a link to your current project code, we can take a look and advise you better.

#3

As @RandellDawson mentioned, provide us with a link.

Sometimes, the actual code will help, but a link allows others to visualise it (what you are asking) much better :slight_smile:

#4

@RandellDawson thanks for the quick reply.

If i’ve done this right, here is a link: https://codepen.io/rfanucci/pen/zRWLox

I appreciate your help

#5

Thank you :slight_smile: Ive replied with a link

#6

Hello Reno. Apologies, but what is it that you wish to achieve, exactly?

#7

Hiya, i am looking to add a fixed nav bar at the top of the page and then have the remaining content beneath it. The issue i seem to be having is when i use navbar-fixed-top anything i add after goes underneath it. I’ve tried using padding but it doesnt seem to chnage that. I hope that makes sense?

#8

Sorry that should have said anything else then starts behind the nav bar so is obscured

#9

OK, so you want your name and image to be below the navigation bar. Is that correct?

#10

No the name, buttons and image are within the navigation bar.

The problem i am having is that anything else i want to add after the navigation is partially obscured behind it as i have it fixed to the top and can’t figure out how to stop that happening.

I’ve looked at advise other campers have received about the use of padding-top in the body to shift everything else just under the bar so it’s not obsucred but it doesn’t appear to make any difference

#11

You had no closing tag on your <hr> tag.

#12

I suggest defining another class called .contentPadding and add it to each content div’s class attribute. It would look like:

.contentPadding {
  padding-top: numberOfPixels px;
}
#13

That should be hr tag, I think that’s the issue you are describing/having?

#14

hr elements do not have closing tags.

1 Like
#15

Apologies, I was referring to the closing bracket within the CSS :wink:

1 Like
#16

Thank you both :slight_smile:

I have closed the } for hr in the css and added the suggestion for contentPadding.

That’s been really helpful and fixed the issue of content behind the navigation bar.

The

line still isnt showing however and i belive that this should be just below the navigation bar before the placeholder text but isn’t showing for some reason?
#17