Landing page help - Pickles

Gotcha! Thanks for your help!

Its telling me:

The .nav-link with href=“#our-story” is not linked to a corresponding element on the page : expected null to not equal null
AssertionError: The .nav-link with href=“#our-story” is not linked to a corresponding element on the page : expected null to not equal null

But when I click on “Our Story” it does take me to that section of the webpage. I don’t understand.

Because in here:

        <li><a class="nav-link" href="#our-story">Our Story</a></li>

that href is telling it to go to an element with the id of “our-story” and it can’t find one.

Thanks, Kevin.

So, I used the following YouTube video for instructions:

I’m pretty much copying from the video but its not working. What gives?

Thanks again!

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).