My Navbar Won't Show up!

My Navbar Won't Show up!
0.0 0

#1

I’m not sure if this is an issue with the way I setup the Pen, or an issue with my code. I’ve been trying to figure this out all day, Googling, and looking at W3Schools, but nothing I try seems to make my navbar show up. I even copy and pasted some functional code just to test, and that didn’t work either, so I’m at a loss.

What am I doing wrong?


#2

Had a look at your pen. Looks to me like your navbar did show up. You just haven’t applied any CSS to it to make it look like a navbar yet.


#3

My bad. You’re trying to use bootstrap. Hmmm… I’m not sure why the navbar styling isn’t rendering. I’ve been having problems with columns not showing in my CodePens as well. Hopefully someone out there has some insight on this. Guys?

Anyway, @DuanSparkles, have you tried putting your code into an HTML doc and seeing if this problem still persists in a regular browser window? That way, you can at least determine if the problem is your code, or if it’s CodePen.


#4

I’ll try that. I’m still pretty new to all of this, so hopefully I don’t break that!


#5

Huh, it worked. So the problem really is Codepen.


#6

Alright, I fixed this by basically going in and changing the version of bootstrap it’s calling, and also made it call the bootstrap css file. That seems to have worked.


#7

Glad you were able to fix it! So, can you share the link for bootstrap that you used? I think I may try the same thing to see if it fixes my problem with columns.


#8

the class names for bootstrap 4.0 (alpha version) changed a little bit, in case you wanted a navbar horizontally placed with a little bit of grey background


#9

You are loading a js file from the css select


#10

Ah! That was my problem. I was looking at documentation for Bootstrap 3, while CodePen links to Bootstrap 4. Maybe that was the same for @DuanSparkles?


#11

Yeah basically I made Codepen link to bootstrap 3, because 4 wasn’t working.

Makes sense that if the class names changed, things weren’t working. I was using at examples that used 3.

Thanks for the insight!