Creating a navbar with an image

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!


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!