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
<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>
Solution 2 :
First of all, it would be helpful if you create a code snippet in your question so that your code is executable and modifyable.
To solve your problem, you can just set the height of the image to a percentage value, so that it scales with the height of the parent container and is never bigger than the container itself. A important thing is, that you should only select the image of the navbar, if you use other images on the Page. So also change the selector to only affect images in the nav (u should do this with all other selectors aswell):
nav img {
display: inline;
height: 70%;
}
You can also set a maximum height, if you dont want your image to be bigger than a certain height:
nav img {
display: inline;
height: 70%;
max-height: 50px;
}
Here‘s an example
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%;
}
nav li {
display: inline;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav a {
text-decoration: none;
color: white;
}
nav img {
display: inline;
height: 70%;
}
<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>
Hope that helps
Problem :
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.
<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.
With no size attribute, the logo becomes huge and all navbar related images disappear.
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.
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.
Comments
Comment posted by Adam
The nav is fixed height so if you put something inside that’s bigger than that, it’ll overflow. Remove that and set your image to inline-block and you’re gravy.
Comment posted by 0xPedro
Thanks Adam, what does “inline-block” do? And could I just do an “overflow:hidden” as a fix? I’ve tried your method and while the image does scale to the size I set it (increasing the navbar’s size) it also adds white space above the nav bar, of the size I pick for the image. If I don’t add a height limit the logo is huge and fucks everything up haha I’ve edited my post at the bottom to show the issue
Comment posted by Adam
See below 0xPedro. I’ve popped a bit of code in for you. Drop me a comment if you need clarification
Comment posted by samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block
Inline block is like a block level element that you can set the width and height and it’ll stay on the same line as your other content and doesn’t push the next element to the next line.
Comment posted by 0xPedro
I thought flex-grow 2 would make the ul take 2/3 of the space while the image will take 1/3 (as it would be a 2+1 split?) here, when you use width to size the image, there is no longer the weird white space issue, but when I add a border to the image to test that out, there is still a horizontal border on top of the nav bar. Any idea? Thanks a lot 🙂 Edit: saving those links, thanks!
Comment posted by Adam
If you don’t put any flex: attribute to an element it’ll be flex-grow: 0 so anything above 0 (so we could use 1 in our case) will try to grow as much as possible and push your image to the side. So you could use flex-grow:1 too.
Comment posted by 0xPedro
Understood, how about the whitespace thing?
Comment posted by Adam
The whitespace is because you’ve got an image between the header and navbar. It’s that image height that’s pushing the nav down. If you put the image insde the header, that whitespace will disappear. I put an image of Bill Murray in to give you an example.
Comment posted by 0xPedro
Ohhhh I just realized that that makes a lot of sense. I really didn’t pay attention there my bad. Thanks a lot man, this is very helpful! I can’t upvote answers yet unfortunately, but I would if I could 🙂
Comment posted by 0xPedro
Hey, how would I go about making a code snippet? I wish this would help but unfortunately if I set a % it makes the image have a decent size, but for some reason there is a huge white space that appears above the nav bar, roughly the size of the % I picked of image’s base resolution. As if when setting a % to the image, that % that can fit goes inside, and the size that can’t fit just appears as a huge white area!
Comment posted by 0xPedro
I added an image at the bottom of my post so you can see the whitespace I’m mentioning
Comment posted by HackerFrosch
@0xPedro edited the solution to only select the nav-image. That should fix it
Comment posted by 0xPedro
It has fixed it, thank you! Could I ask you why do you think that changed anything? There’s only one image in my code, and its in nav, so why would specifying the image (when there’s only one!) change the apparition of a white space on top?
Comment posted by HackerFrosch
@0xPedro Nope there are 2 Images in your code. There‘s also the
