# Product Page - Feedback Requested

**URL:** <https://forum.freecodecamp.org/t/product-page-feedback-requested/400282>\
**Category:** I Built This\
**Created:** [June 7, 2020, 6:13pm UTC](https://forum.freecodecamp.org/t/product-page-feedback-requested/400282 "2020-06-07T18:13:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JohnJohn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnjohn/32/135695_2.png) [@JohnJohn](https://forum.freecodecamp.org/u/JohnJohn)\
**Post date:** [June 7, 2020, 6:13pm UTC](https://forum.freecodecamp.org/t/product-page-feedback-requested/400282/1 "2020-06-07T18:13:37Z")

</div>

Hello Everyone,

I’ve gotten my product page to a place where I’m happy with it (it passes all of the tests except for the ones related to the header because I didn’t want the navbar fixed). As a result I have not included the hamburger menu on this page.

[Natrol’s Melatonin Product Page Re-do](https://codepen.io/JohnathanCodes/full/vYLObRg)

One question I have is regarding the logo in my header. I’ve used a ton of media queries to get the logo to be vertically aligned in the nav bar (by changing the padding) because I couldn’t figure out how to align it otherwise. I’ve tried `display: flex` and `vertical-align: middle` and `align-items: center to no avail`. If you have any ideas I’m all ears.

---

<div class="post-metadata">

**Author:** ![sobadrdb](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@sobadrdb](https://forum.freecodecamp.org/u/sobadrdb)\
**Post date:** [June 7, 2020, 7:01pm UTC](https://forum.freecodecamp.org/t/product-page-feedback-requested/400282/2 "2020-06-07T19:01:42Z")

</div>

hi @JohnJohn

for me it working like this on my navbar

```auto
<nav>
  <div logo>
     <img>
   </div>
   <div link>
      <a href></a>
   </div>
</nav>

```

```auto
nav {
  display: flex;
  justify-content: space-between;}
.logo {
  height: 100px;
}
img {
  display: block;
  margin: auto;} /*need display block to center with margin auto*/
.link {
  margin-top: auto;} /*optional*/

```

well actualy its like my landing page navbar.

hope this work.  
cheers

edit: you might have to removes all the link to the external page that you reffering to. as it would be flaged as spam, like my landing page before i removed all.

---

<div class="post-metadata">

**Author:** ![Alveek](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/alveek/32/105408_2.png) [@Alveek](https://forum.freecodecamp.org/u/Alveek)\
**Post date:** [June 7, 2020, 7:14pm UTC](https://forum.freecodecamp.org/t/product-page-feedback-requested/400282/3 "2020-06-07T19:14:41Z")

</div>

hey, great job and nice code )

I suggest you to delete floats in logo and nav-bar and use flexbox instead. But first make some changes in nav-bar. You need two containers which will contain logo on the left and links on the right. Like so:

```auto
<nav id="nav-bar">
      <div class="logo">
        <img src="https://www.natrol.com/images/logo.png" alt="logo">
      </div>
      
      <div class="links">
         <a class="nav-link" href="#more">More Info</a>
        <a class="nav-link" href="#misconceptions">Facts</a>
        <a class="nav-link" href="#products">Products</a>
        <a class="nav-link" href="#melatonin_info">About Melatonin</a>
      </div>
</nav>

```

And this is how to make elements in the nav-bar aligned center and spaced between each other:

```auto
  #nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

```

---

<div class="post-metadata">

**Author:** ![JohnJohn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnjohn/32/135695_2.png) [@JohnJohn](https://forum.freecodecamp.org/u/JohnJohn)\
**Post date:** [June 9, 2020, 2:02am UTC](https://forum.freecodecamp.org/t/product-page-feedback-requested/400282/4 "2020-06-09T02:02:33Z")

</div>

Thank you both. I knew I needed to use flex, but couldn’t figure out where. I appreciate both of you to taking the time to help me out. I’'ll update my page soon.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:16pm UTC](https://forum.freecodecamp.org/t/product-page-feedback-requested/400282/5 "2021-06-01T13:16:09Z")

</div>

Closed on June 1, 2021, 1:16pm UTC