Landing page help - Pickles

I figured out why I was failing. I needed to change the following for each nav-link:

<h2> <a name="our-story">Our Story<a/></h2>

to:

  <h2> <a id="our-story">Our Story<a/></h2>

Although both seem to work, the only way to pass the test is to use “id” instead of “name”.

Thanks again for your help.

Does anyone know how to move the logo in the header to the left side of the header? See link below. Thank you.

https://codepen.io/MacroFrito/pen/poyqrgg

Hello, could you give the #header a display: flex and justify-content: space-between or space-around, it depends on what style you want to give the header. But as an alternative you can change the margins but having everything in the same container you would have to see how it turns out. Thinking about the responsive design, I think the display: flex would be a good alternative.

You set margin-left of the logo to “auto” …that will have it slide all the way to the left .

Great. So, I just used:

#header-img {
  display: flex;
}

And the logo did move the left. Thank you.

However, the logo is now higher than the text “Marc’s Pickles”. Is there a way to ensure that the logo and the text are at the same height? Thanks again for all your help!

You know what, I tried that but it didn’t work…Any other suggestions?

have you tried to set the following?

align-items: center;

Within which element in css? The header? or the header-img? I tried both of those but nothing happened.

Here’s where I’m at:
https://codepen.io/MacroFrito/pen/poyqrgg

The logo is higher than the “Marc’s Pickles” text. I’d like them to both be the same height, if possible.

Bro… you were suppose to display the flex in the header element since its the container of the logo and the header title then also include justify-content and align-items

Thanks for your help.

OK. So now I have the following CSS:

#header {
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

And here’s the web page:

https://codepen.io/MacroFrito/pen/poyqrgg

How do I separate the “Marc’s Pickles” text (to be centered) from the logo. I’d like to keep the logo right where its at (on the left of the header) but slide the “Marc’s Pickles” text to the center of the header. Seems easy but having a lot of difficulty.

Hey Macro,

The problem is that you’re including the image inside the H1 tag.

You’re a genius! Thank you!!

Hi,

Here’s where I’m at:
https://codepen.io/MacroFrito/pen/poyqrgg

I’d like the “Marc’s Pickles” text to be in the center of the header with the 3 nav elements (our story, products, merch) to sit centered below it.

The user story requirements are:

  1. The nav element must be within the header
  2. #navbar should always be at the top of the viewport

If anyone can help me through this I would greatly appreciate it! Thank you.

I think connecting these requirements doesn’t make that much sense, because the #navbar should always be at the top, but you want to have the nav below your Marc’s Pickles-heading. Although you could make your Marc’s Pickles-heading the #navbar or move it into it, I think that doesn’t fit the semantic meaning of it (Marc’s Pickles is semantically not a navbar and shouldn’t live in it).