Issue with Navbar staying sticky when passing another list

HTML-CSS
1

Hi everyone! I built a nav bar for the site I’m making for a college class, and for some reason, it seems to be “collapsing” whenever I encounter any other kind of list. Here is my site in CodePen: https://codepen.io/annetheginger/pen/vwBeQv

It works fine on the other page I have, the one labeled “Home/Index” because it doesn’t encounter another list. I tested it by putting both unordered and ordered lists in it, and it had the same result, so I’m trying to see if it’s something I need to add for the CSS.

Thank you in advance!!

2

It happens when the page scroll gets to the end of the container the ul is inside, i.e. the first <center> element block. The <center> element is also obsolete and should not be used. So is the attribute bgcolor you have on the body element. Use the body selector instead and remove all the <center> elements and the bgcolor attribute from the body element.

body {
  background: lightseagreen;
  text-align: center;
}

Doing this means you will have to make some adjustments.

To center the player again, change the margin on the .audio-player class to use auto on the left and right. Use max-width instead of width so the element can shrink, otherwise, it will cause an overflow.

margin: 2rem auto 2rem auto;
max-width: 500px;

To fix the ul elements with the game lists I would suggest making a class, say .game-list. I would assume you want them centered on the page. As you have it right now, they actually move around horizontally depending on the width of the page.

/* Remove this and all inline styles on your ULs */
/* ul {
   padding-left: 625px;
   list-style-type: circle;
} */
/* Add this class to all the ul elements with games */
.game-list {
  font-size: 18px;
  text-align: left;
  color: #f0f8ff;
  max-width: 360px;
  margin: 40px auto;
  list-style-type: circle;
}

If you want to limit the width of an element use max-width and margin: 0 auto; to center it.

.p1 {
  /* margin-right: 300px; */
  /* margin-left: 300px; */
  max-width: 500px;
  margin: 0 auto;
}

Your table element is causing an overflow, give it width: 100% and a max-width

width: 100%;
max-width: 800px;

Last, I would suggest moving all your style to the CSS. Using inline styles should be kept to a minimum. They make CSS less maintainable and will cause issues in the long run when you need to overwrite styles.

1 Like
3

Wow, thank you so much! I really learned a lot from your answer. It solved the problem and really cleaned everything up. My professor really only ever went over inline styles, and I learned everything else through W3Schools and from looking at other websites. I corrected everything on my site, and I’ll update the CodePen to show the changes. Once again, thank you!