Imitation of Apple.com's Navbar

Hello! can someone tell me why my li’s aren’t spacing out like I told them to?

Nevermind! I found the problem! I accidentally gave it a width of 100px instead of 1000px in .menu :grimacing:

I, unfortunately, have an error in my jquery now. I don;t know what the problem is. Please help. Thank you!

What is the behaviour that you are expecting here?

1 Like

When I press on the search logo, I expect most of the other icons to disappear, but nothing happens at all right now.

I’m seeing an error in the console about your jquery <script> tag:

None of the “sha256” hashes in the integrity attribute match the content of the subresource.

So jQuery isn’t loading and thus $ is not defined, which is exactly what the next console message says:

Uncaught ReferenceError: $ is not defined

You don’t need to include jQuery in the HTML so get rid of it. You are already loading jQuery. Click on the settings icon for JS and you will see that it is already included as an external script.

Next, don’t put your custom JS in the HTML either. Put it in the JS editor that codepen provides.

Once you do the above then your click handler on the search icon should work.

1 Like

I don’t think you want to put a <script> tag in the JS editor since it’s not JS.

2 Likes

You have to set the a element to something other than inline for the transform to work (like inline-block or block for example).

The jQuery library script loading in the HTML is being blocked. I would sugget you remove it and only use the settings. Then move the actual code inside the HTML to the JS code box instead.

Well, I got rid of the jquery script. But i’ve never put my JS in the side provided by Codepen. What do I need to add or take away once I put it there?

I’ve always just had it in my html.

You can have it all in the HTML but I wouldn’t really suggest it.

In any case, you have to update the script you can find the latest version on https://code.jquery.com/

Here it is working with it all in the HTML (and the link set to inline-block)

1 Like

Beautiful! Thank you so much!

I have one last problem. How do I get rid of the space above my navbar?

I have one last problem. How do I get rid of the space above my navbar?

You’ll laugh when you see this. Look very closely at the opening <body> tag. Do you see something right in front of it that shouldn’t be there?

1 Like

No way! That’s just so funny! I did laugh! Thank you for your help!

Ya, I thought it was just a piece of dirt on my monitor. Took me a few minutes to realize it was a dot. By the way, the menu looks real cool. The transition when you click the search icon is very nice.

1 Like

Thank you! :slightly_smiling_face: :heart: :+1: