ul position fixed problems

[danep11465962]

Hi there

I am having trouble trying to create a fixed UL the problem is that when I do position: fixed the items in the list overlap and occupy the same space. Is there code that can be added or should i try another approach? Would it be easier to fix the position of my header? I tried that but i can't change there alignment.

Here is a copy of my source code header.

<header>

  <div class="row">

  <div class="col">

  <img class="style-logo" src="seasidewhite.png" alt="Seaside Logo">

  <nav class="style-nav">

  <ul>

  <li><a href="*">Home</a></li>

  <li><a href="*">Product</a></li>

  <li><a href="*">Contact Us</a></li>

   </ul>

   </nav>

   </div>

   </div>

</header>

Here is a copy of the css style

html,

html * {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  font-family: Azo Sans Black, Azo Sans Black Italic, Azo Sans Bold, Azo Sans Bold Italic, Azo Sans Italic, Azo Sans Light, Azo Sans Light Italic, Azo Sans Medium, Azo Sans Medium Italic, Azo Sans Regular;

}

header {

  padding: 32px;

}

.style-logo {

  margin-left: auto;

  margin-right: auto;

  display: block;

  position: fixed;

}

.style-nav ul {

  list-style-type: none;

}

.style-nav ul li a {

  text-decoration: none;

  color: #9E9E9E;

  display: block;

  text-align: center;

  position: fixed;

Thanks in advance

[Jon Fritz]

You have the position:fixed on the wrong selector.

It should be on the container that holds your menu, on the <ul> or better still, on a <div> that holds your <ul> (unless you want to write some of css turning the <ul> tag into a block level container), not in the individual menu items.

[osgood_ · Accepted solution]

Move position: fixed from the css selector below:

.style-nav ul li a {

  text-decoration: none;

  color: #9E9E9E;

  display: block;

  text-align: center;

  position: fixed;

Create another css selector named - style-nav - and use position: fixed;

.style-nav {

position: fixed;

}

[danep11465962]

Thank you sooo much!