Landing Page Nav Bar

HTML-CSS
1

Hello,

I could use some help on setting up a nav bar on the landing page project. I am trying to make it look like this one from the example: https://codepen.io/freeCodeCamp/pen/RKRbwL . This is mine so far: https://codepen.io/danh4648/pen/WBxZgR . As you can see it looks really bad. I have tried many things in CSS, trying to style the nav element, the ul element, etc.

I am struggling with having the logo on the same line as the nav bar, also having the links towards the right but not off edge of screen and I would like to have some space between them. I keep changing things and I am not getting anywhere. Not sure if I should use flex, grid, align-text, space-around or what. Feel totally lost.

2

It looks pretty good! I would get rid of the header element and just put your logo, title, and nav list in the nav element. Having it in a header element seems redundant. What I normally do for nav bars is just set the ‘margin-left’ of the ul element to ‘auto’ and it should move over.

Here’s what I made the CSS look like to get it to move over (after I deleted the header element from the HTML)

nav img {
  height:100px;
}

nav {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: row;
}

nav * {
  display: inline-block;
}

nav li {
  margin: 20px;
  
}



nav ul {
  margin-left: auto;
}

nav li a {
  text-decoration: none;
  color: black;
  font-size: 20px;
}

nav h1 {
  padding-right: 40px;
}

body {
  margin-top: 140px;
  background-color: #f2f2f2;
  padding: 20px;
}

Hope this helps!

3

Thanks. I will try it. It did seem redundant and I prefer simpler solutions but I just could not get it to work so I found an online tutorial and followed that. I hate that it seems the only way I can figure out these CSS layout problems is copying something online. I am reading everything I can online but having a hard time wrapping my head around css layouts.

4

I definitely feel that. I had/still have the same issue on a lot of higher level CSS stuff. On layout specifically, it was just a lot of trial and error until I slowly came to find the things that worked the best (flex box still confuses me some days). I’m still a long ways from confident, but it gets better every day. You’ll get there!

1 Like
5

Thanks worked like a charm. I was able to get bits and pieces to work but this way gets everything configured just the way I wanted. Thanks!

1 Like
6

One question though. Why does ‘margin-left: auto;’ move the three links to the right of the nav bar?

7

The way I understand, using margin: auto will take the overall available space around an element and distribute that space to the left and right margin evenly (this is why it will center an object). Using margin-left: auto has the same similar effect, but uses all the available space around an element for the left margin (in turn it pushed the elements to the right). I’ve attached a link that explains a bit better than I can. (https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left)

1 Like