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;
}

score 1 · Answer 1 · answered Jun 22 '17 at 20:53

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 '17 at 20:53

Obsidian Age

41,205
10
48
71

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? – springathing Jun 22 '17 at 22:50
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 `
` elements) needs the `display: inline-block` attribute. You can't attach it to the `

Obsidian Age

Jun 22 '17 at 23:46

score 1 · Answer 2 · answered Jun 22 '17 at 20:57

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.

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"? — springathing, Jun 22 '17 at 22:47

score 1 · Accepted Answer · answered Jun 22 '17 at 21:27

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!

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"? — springathing, Jun 22 '17 at 22:42
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. — Shenole Latimer, Jun 23 '17 at 04:06

Navigation bar HTML/CSS styling

3 Answers3