Creating a navbar with an image

Hi everyone! I’m working my way through freecodecamp, w3schools and Cole’s Udemy bootcamp course, trying to make sure I’ve covered a language/library on each and feel comfortable before moving on! I’m currently on CSS/Bootstrap.

I’m trying to do one of the projects, making a fake webpage. It’s very bare as I just started it, but Ive been stuck on one element today.

In my code, the image header comes above the navbar, but on the page it is below. I want it the other way around, and I want them both fixed to the top of the viewport. I’ve tried to change the header code and the navbar code but I have a feeling there’s something in bootstrap stopping me? I’ve only been at this a couple of weeks though so it could be anything. Any help would be appreciated!


That’s because it is outside the bootstrap container.

You can:

  1. Cut <img src="" id="header-img" alt="company logo"> from that place, and paste it inside the container of the #navbar, at the beginning.

  2. You can style it in CSS with the following (It looks great on my screen and I’m suggesting it):

#header-img {
  height: 50px;

Don’t forget to add a media query to make it smaller for small screens. I suggest to change it from 50px to 40px when under 400px screen width, but it’s all up to you.

Good luck!

1 Like

Thank you! I’ve been moving that part around but hadn’t quite found the right place!

You’re welcome Ms. nicolajanemcd. [edited] :+1:

Not hugely important but ms. nicolajanemcd!

1 Like