Creating a navbar with an image

HTML-CSS
1

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!

Here: https://codepen.io/nicolajanemcd/pen/jpXmqW

2

That’s because it is outside the bootstrap container.

You can:

  1. Cut <img src="http://i64.tinypic.com/2h874w9.jpg" 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
3

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

4

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

5

Not hugely important but ms. nicolajanemcd!

1 Like