Product Landinig Page | Help

Here is the link to my codepen.


I want to have a decent amount of space between the menu items in a way that keeps the underline that happens when hover is in effect. Right now that underline exceeds the actual width of the menu items because I am using padding. What do you suggest I do?

Forget everything under the navbar. That’s easy to fix and been put on hold until I figure this one out.

can you explain better?

I assume you mean you want the underline to be no wider than the link text? If so, put the padding on the LI instead.

Why do you have the .nav-link selector twice and why are you using !important to overwrite its own style?
Also, justify-content is a flexbox property .nav-link would have to use display: flex for it to work.

Summary
// Delete this selector
.nav-link {
  padding-right: 25px !important;
  padding-left: 25px !important;
  justify-content:space-between;
}

// Add this
#nav-bar ul li {
  display:inline;
  float:left;
  /* This sets the space on the list items, 14px top/bottom 25px left/right */
  padding:14px 25px;
}

.nav-link { /* LIST ITEMS */
  float:right;
  text-decoration:none;
  text-align:center;
  color:white;
  /* This sets how far down the underline is from the link text */
  padding-bottom: 14px;
}

Okay. Everything seems to be working better now. How do I add that space between the menu items? They’re too far to the right and I want to bring them closer to the middle but with the “Contact Us” menu item where it is right now.

You seem a little confused about when to use float.

I can’t know how exactly you want it to look, but here is one version. I have commented out the properties instead of removing them.

Summary
nav {
    width: 100%;
    height: 80px;
    background-color: black;
    /* float: right; */
    position: fixed;
    /* margin: 0 auto; */
    overflow: hidden;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    /* width: 35vw; */
    /* float: left; */
    list-style: none;
    /* margin-left: 760px; */
}

nav ul li {
    /* display: inline; */
    /* float: left; */
    display: inline;
    /* float: left; */
    padding: 14px 40px;
}

nav ul li:not(:last-child) {
    margin-right: 60px; /* sets the space between the first to nav links */
}

I’m confused about this whole project to be honest. It’s quite the leap from the Tribute Page and the Survey Form projects.

For the navigation bar, I think it looks okay the way it is now. Maybe a little space between the menu items without affecting the positioning of the last menu item. I tried to use your code but it stacks up the words instead of laying them side by side and moving them.

For the rest of the page I’m not sure yet. I like the way the video is positioned at the moment. But everything else is clearly a mess. I’ll have to learn grid in order to accomplish this. Especially when it comes to making it responsive.

And I don’t remember why I was using float now. I think I was doing that to adjust the navigation bar so that it looks like this (big reveal :roll_eyes: lol). Oh wait I remember why. The logo has a black background (that’s why the page has a black theme because I can’t remove that background from the logo) and when I was doing the navigation bar, I sort of separated the logo and the header from the navigation bar and when I gave them both the position:fixed; property, the logo was on top of the navigation bar and I wanted to float it to the right so that they’ll both be on the same line. I don’t think I need it anymore? Let me check.