Navigation bar HTML/CSS styling

Question

Using CodePen, I've been trying to style a fixed navigation bar with my username on the left side and a list of inline links on the right side. I haven't figured out how to properly format it because after putting the h1 or p element with my username, the list of links aren't even within the colored div that they're held in.

My question is: how do I format my navigation bar properly so everything is inline and neatly placed without covering up the next div while in the fixed position? Also any advice or tips is appreciated.

HTML:

<body>

<div id="fixed">
  <p>Springathing</p>
  <ul id="nav">
    <li><a href="#about">About</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>

<div id="overall">

  <div id="about">

  </div>

  <div id="portfolio">

  </div>

  <div id="contact">

  </div>

  <div id="pageinfo">

  </div>

  <div id="copyright">

  </div>

</div>

</body>

CSS:

body {
  margin: 0;
  padding: 0;
}
#nav {
  list-style: none;
  text-align: right;
}
#fixed {
  background-color: #4F7BF7;
  height: 60px;
  width: 100%;
  position: fixed;
}
#overall {
  background-color: #5D6363;
}
#about {
  background-color: #A2A2A2;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#portfolio {
  background-color: #B8BBBB;
  border-bottom: 1px solid gray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#contact {
  background-color: #B8BBBB;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#pageinfo {
  background-color: #A2A2A2;
  width: 100%;
  height: 100px;
}
#copyright {
  background-color: #4F7BF7;
  width: 100%;
  height: 50px;
}

Shenole Latimer · Accepted Answer · 2017-06-22 21:27:57Z

1

I take it you're new to CSS? If you are, no worries, CSS can be a bit of a pain and takes a little getting used to.

I reproduced what you were trying to do and so here's what I'm going to do.

FIRST - I will provide a screenshot of what I managed to code.

SECOND - I will provide the code you need (which is only a few lines) to get the results I did.

THIRD - I will explain what is going on with the code.

Ok, first here is the screenshot of what my results were:

Ok, now for the code that got me this result...

HTML

<div id="fixed">
  <p>Springathing</p>
  <ul id="nav">
    <li><a href="#about">About</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>

<div id="overall">

  <div id="about">

  </div>

  <div id="portfolio">

  </div>

  <div id="contact">

  </div>

  <div id="pageinfo">

  </div>

  <div id="copyright">

  </div>

</div>

</body>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
  margin: 0;
  padding: 0;
}

#nav {
  list-style: none;
  text-align: right;
}

#fixed {
  background-color: #4F7BF7;
  height: 60px;
  width: 100%;
  position: fixed;
}

ul#nav {
    width: 500px;
    margin: auto;
}

ul#nav li {
    display: inline-block;
}

ul#nav li a {
    text-decoration: none;
}

#overall {
  background-color: #5D6363;
}

#about {
  background-color: #A2A2A2;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

#portfolio {
  background-color: #B8BBBB;
  border-bottom: 1px solid gray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

#contact {
  background-color: #B8BBBB;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

#pageinfo {
  background-color: #A2A2A2;
  width: 100%;
  height: 100px;
}

#copyright {
  background-color: #4F7BF7;
  width: 100%;
  height: 50px;
}

And now for an explanation...

First of all, you will notice that I didn't change your HTML at all. What you needed all had to do with the CSS.

Basically I did 2 things. The first thing was I provided a little snippet of code to do a "soft browser reset", because I don't know what you're getting on your screen, what browser you are using, etc. The soft reset gives me some equal footing (and you) to be able to produce as nearly the same results from each other as possible.

The second thing I did was focus in on you "ul" element. I gave it the following:

same width as your other portfolio div elements
a margin of auto for the "ul" element so that it would be centered
I gave the "li" elements a display of in-line so that they would line up next to each other
I gave the "a" elements a text-decoration of none to get rid of the underlines

And there you have it. I hope that helps!

Lastly, I would recommend an exercise. What I did to learn CSS better/faster was, aside from youtube and online tutorials, I used "inspect element" from Google Chrome to look at simple websites and then I copied what I saw and found out WHY they did those things. I would also try to find templates and reverse engineer them. Like I said, it takes some time but it's worth it!

Good luck!

answered Jun 22, 2017 at 21:27

Shenole Latimer

3261 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

springathing Over a year ago

I appreciate the recommendation, so far I'm sticking to freecodecamp for learning purposes but reverse engineering seems like a great idea. For the fixed div though, since it covers the upper portion of my "about" div, should I use margin-top on the div "about", or should I use margin-top on the text that I input into the about div by giving it an "id"?

Shenole Latimer Over a year ago

Hey Springathing, sorry it took a while to get back... CRAZY evening! Regarding your question, rather than putting margin top on just the about div, I think I would have given all of those divs (about, portfolio, etc) the same class. Within that class I would have given them all the same properties such as width, height, padding, margin (top, sides, whatever), etc., and then I would have used the IDs for more individualistic things like background colors for each div. You could do it the way you mentioned, but doing it the way I described would provide more options and a more consistent look.

Obsidian Age · Accepted Answer · 2017-06-22 20:53:42Z

1

You're missing three things here:

Your header's <p> tag needs display: inline-block.
Your navigation <ul> needs to float: right.
Your navigation list item <li> tags need to have display: inline-block.

I've updated your code to include these three additions, and have created a new fiddle demonstrating what I believe you're looking for here.

Note that you also might want to add a bit of margin-right to #nav, and a bit of margin-left to #fixed p.

Hope this helps! :)

answered Jun 22, 2017 at 20:53

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

2 Comments

springathing Over a year ago

What is the reason for me not being able to apply inline-block to "ul"? Since its the parent don't the child "li"s inherit the inline style?

Obsidian Age Over a year ago

It depends on which element you are trying to display inline. Essentially, you want your three links to display next to each other, so each one of the links (the <li> elements) needs the display: inline-block attribute. You can't attach it to the <ul> instead, as display is not inherited. Even if it was, you would need to explicitly state to inherit it (overriding the default display: list-item), and set it on the parent, creating twice as much code as setting it on the target element itself ;)

James · Accepted Answer · 2017-06-22 20:57:59Z

1

You could do a couple of things here.

Display the P and #nav as inline-block. And float the #nav right.

You can also remove the height: 60px so that the content controls the height.

body {
  margin: 0;
}

#nav {
  list-style: none;
  text-align: right;
  float: right;
  margin: 0;
}
#fixed {
  background-color: #4F7BF7;
  height: 60px;
  width: 100%;
  position: fixed;
}
#overall {
  background-color: #5D6363;
}
#about {
  background-color: #A2A2A2;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#portfolio {
  background-color: #B8BBBB;
  border-bottom: 1px solid gray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#contact {
  background-color: #B8BBBB;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#pageinfo {
  background-color: #A2A2A2;
  width: 100%;
  height: 100px;
}
#copyright {
  background-color: #4F7BF7;
  width: 100%;
  height: 50px;
}

p,
#nav {
  display: inline-block;
}

<div id="fixed">
  <p>Springathing</p>
  <ul id="nav">
    <li><a href="#about">About</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>

<div id="overall">

  <div id="about">

  </div>

  <div id="portfolio">

  </div>

  <div id="contact">

  </div>

  <div id="pageinfo">

  </div>

  <div id="copyright">

  </div>

</div>

You could do other things such as give the header a bit of padding and also display the #nav li inline-block if you want them next to each other rather than listed.

answered Jun 22, 2017 at 20:57

James

3232 silver badges13 bronze badges

1 Comment

springathing Over a year ago

I like the height idea, setting it with height makes my word stick to the upper left portion so I think I'll just add padding to all the words. Why would you recommend "float" instead of "text-align"?

Collectives™ on Stack Overflow

Navigation bar HTML/CSS styling

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related