How to get nav bar and logo image on same line?

HTML-CSS
1

Hi all. I’m a beginning web developer working on my front end certification here on FCC. I’m currently working on the product landing page project, but I cannot get the nav bar and the logo image to appear on the same line. Here is my codepen, please excuse the crudity, as I haven’t worked on the fonts/colors/aesthetics yet at all: https://codepen.io/jeremyg2112/pen/bOoyzJ

What I want is to have a nav bar that is centered over the body of the page, and at the same time have the logo image off in the top left corner, visually aligned with the nav bar, but not affecting the nav bar’s center position over the body. The current design is the closest I could get. It behaves well and is responsive, but you can see there is all that wasted space above the nav bar and it looks awful (looks good at mobile resolution though).

For the nav bar ul element, I’ve applied:

  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;

I’ve tried putting the logo image into the ul element so that it will be part of the flexbox, but I would just prefer it to be all the way off to the left if possible. What are my options? I’ve also tried changing the img display property to inline or inline-block, but that didn’t change anything.

2

I suggest you to use display: flex; for the header tag as well this will help you align the logo and nav-list on the same line. And later you can adjust size and position as needed.

3

I think you might be better off just using positioning for this.

Here is one way of doing it:

Summary 
header {
    margin-top: 40px;
    position: relative;
}

#header-img {
    display: block;
    /* margin: auto; */
}

#nav-bar {
    /* margin: auto; */
    position: absolute;
	width: 100%;
	max-width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


@media (max-width: 850px) {
    #nav-list {
        flex-direction: column;
        align-items: center;
		background: transparent;
    }
}
4

Thank you! It almost works the way I want, until I constrict the size of the browser window far enough that the nav-bar ends up overlapping the logo image. But it is one option I could continue trying to work with!

5

It did work to get the logo and nav-list on the same line, but the spacing still isn’t how I ultimately want it. But at least this gets me a way to have them on the same line. I may end up going with a different layout… Thanks!

6