Bootstrap nav question

Hello all,

I’ve spent a while trying to get to the bottom of this - I hope it is appropriate to post a question of this nature so early on in my project!

I’ve just started working on my Portfolio Page this morning and have been trying to get my nav bar looking how I want it before moving forward. I’ve been trying to use Bootstrap classes to do this, however my nav bar doesn’t have the basic formatting / layout that others appear to be achieving with the same code. Here’s mine:

https://codepen.io/duvallpj/pen/devQOE

And here’s the sort of general layout I was anticipating:


(Thanks Sofia, by the way, if you see this - I really like your page.)

And similar to the nav bar example on this page:

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Thanks in advance for your help!

I can offer you a general tip that will turn out a life saver. It’s not mentioned or taught on this site, as far as I know. But I’m not that far in, I have to admit.

  1. Get the Google Chrome browser.
  2. Go to the W3School page.
  3. Right-click on the navbar and choose Inspect (or chose CTRL+SHIFT+i on Windows.
  4. It will show you the source code and you can see how it’s done.

There’s a good intro tutorial on YouTube about it:

Into to Google dev Tools

I’ve only just started again with coding, after quite some years of absence, so I am about at the same point as you are. I still have to start on the portfolio, but I am kind of aiming for the samish. I can give you some insight on a part of it. Navbar is something from Bootstrap. What you really have to realize is that Bootstrap is nothing more than basically a CSS Stylesheet that has defined the hard bits for you already. That means it has standard background colors and text colors for the navbar. So you need to overwrite them!

That’s where the Bootstrap documentation on Navbars comes in. I hope this gives you a nudge in the right direction :grinning:

Some stuff that is not directly related: I think the Bootstrap stylesheet is already linked ‘under the hood’ on Codepen (I haven’t used Codepen much, since I don’t really like it). Normally you link the stylesheet in your header. If you ever start working with seperate stylesheets for your website, you need to link your own style sheet AFTER the Bootstrap style sheet, or else it won’t ‘overwrite’. Been there, done that :blush:

Thanks for all your hints and tips! I have my nav bar kinda-set up now! Just having an issue with the background not extending the full width of the page.

Moments later, I seem to have fixed that issue using a class called navbar-expand-lg. I threw it in basically because the title sounded like a good idea!

Seems to break if I reduce the window size now though…