Search code examples
htmlcssimagenavbarnav

How do I make this image work within my navbar?

I'm trying to add an image to a navbar, and I have countless issues regardless of the approach I take. The image "exits" the container when it is too big, the image isn't aligned in the center - vertically or horizontally, the image changes how the navbar looks depending on the size...

I just want an image that fits either at the end or just somewhere in my navbar, and moves with the other elements if I resize the page. (i.e. stays to the right of the other tags).

I have this code as part of the freecodecamp challenge of making a product landing page, and I'm trying to make a navbar, with the logo within the navbar. I wanted it at the right but I've since given up I just want it in it.

I've tried the W3School tutorials, tried using Flexbox (example in the code here) and a bunch of different things. The problem is that the image isn't "in the container." I can always modify its size and it will either exit the navbar, modify the navbar size... countless issues.

Here is the html & CSS:

html {
  box-sizing: border-box;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  height: 30px;
  width: 100%;
}

li {
  display: inline;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: white;
}

img {
  display: inline;
  width: 20px;
}
<header id="header">
  <img id="header-img">
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#Running">Push Farther. Run Wilder.</a></li>
      <li><a class="nav-link" href="#Hiking">Above. Beyond. And Back Again.</a></li>
      <li><a class="nav-link" href="#Diving">Groundbreaking, even in the sea.</a></li>
    </ul>
    <img src="https://cdn.freebiesupply.com/logos/large/2x/apple1-logo-png-transparent.png"></img>
  </nav>
</header>

These are the issues that happen:

In this image I used height for the img, and a height occurs ON TOP of the navbar, plus the logo exits the navbar instead of being capped or something.

enter image description here

With no size attribute, the logo becomes huge and all navbar related images disappear. enter image description here

And then without flexbox, getting the image to be in the navbar, properly sized, and aligned never happened.

Just not sure how to fix this, what I'm misunderstanding of CSS.. I've spent so long on this thing.

Thanks a lot for any help!

Edit:

For the fixes I've been shown, this error occurs: enter image description here

As you can see, there is white space above the navbar. I gave the logo a red border so the whitespace is more visible and maybe it helps someone understand the problem.

Solution

  • Wecome to the mysteries of CSS 😉

    Firstly, I've made the body margin:0 as that often causes overflowing headaches. Having that and setting everything to border-box can stop a lot of alignment/positioning headaches. That should be the first few lines of any part of your CSS.

    I've then made your ul block flex-grow:2, that that tries to do is expand as much as possible so that will push your apple logo to the right.

    To stop it hanging right to the end I've put a padding in your nav.

    Have a look and see what you think. If you have any questions pop a comment in and I'll explain.

    Edited to add: Here's a couple of resources to get you going from CSS tricks and Kevin Powell

    *,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header {
  margin: 0;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0.5rem 1rem;
}

li {
  display: inline;
  margin-inline: 0.5rem;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  flex-grow: 2;
}

a {
  text-decoration: none;
  color: white;
}

img {
  display: inline-block;
  width: 50px;
}
    <header id="header">
  <img id="header-img" src="https://www.fillmurray.com/50/50/">
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#Running">Push Farther. Run Wilder.</a></li>
      <li><a class="nav-link" href="#Hiking">Above. Beyond. And Back Again.</a></li>
      <li><a class="nav-link" href="#Diving">Groundbreaking, even in the sea.</a></li>
    </ul>
    <div>
      <img src="https://cdn.freebiesupply.com/logos/large/2x/apple1-logo-png-transparent.png">
    </div>
  </nav>
</header>