https://codepen.io/fmdavids/pen/ZELaRgJ?editors=1000

Tell us what’s happening:
Please, kindly help me out.
The search input in my nav bar and the ul on the right are running into each other when page reduced, nav bar is not responsive.

I also have difficulty getting the code to user story 5, 12 and layout 1

Please help

Your code so far

https://codepen.io/fmdavids/pen/ZELaRgJ?editors=1000

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

first fold your big elements, your <header> tag is not consistent with the surrounding elements. And why is there a div which wraps the header, the header itself purpose is to wrap all the header elements, which can be navigation bars as well(altho not a rule to follow).
For the nav links issue, two of them do not have the proper href paths. You point to ./about.html and /contact.html . Instead refer to the elements id’s, like you did with your href="#product-header".

To render the nav-bar always on top of the viewport, you can set its position to fixed and top: 0 . I suggest you read more on those properties and what their use is. In your case you will need to apply this to your header element. At least thats what passed the requirement when i tried it in your codepen.

Hi @fmdavids !

In the future, please avoid placing links in the title of your posts since we can’t click on them.

But your search bar has a min-width of 600px. That is not going to work for smaller devices.

I would delete that.

Thank you for these advice

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.