Product Page - Feedback Requested

I Built This
1

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

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.

2 Likes
2

hi @JohnJohn

for me it working like this on my navbar

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

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.

3

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:

<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:

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

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.