I have my nav links but they keep showing up in the bottom of the box but I need them to be in the top left. I have tried a fixed position but not sure what is wrong. I will attach the CSS, let me know if you will need the HTML as I am a beginner and not sure what is needed.

Here is the CSS

* { box-sizing: border-box; }
body {font-family: Arial, Helvetica, sans-serif;}

.col-container {
display: table;
width: 100%;
}
.col {
display: table-cell;
padding: 20px;
}

header {background-image: url(stars.jpg);
    padding: 30px;
    text-align: center;
    font-size: 35px;
    color: white; }

h1 {font-size: 2em;}

nav {
padding: 20px;
float: left;
width: 160px;
background-color: #1d9c81;
  }

nav a {text-decoration: none;}
nav a:link {color: #FFFFFF;}
nav a:hover {background-color: #49239b;}

nav ul {
list-style-type: none;
margin: 0;
padding-left: 0;}
  
article {
float: left;
padding: 10px;
background-color: #ffffffe2;}

  
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;}
  
footer {
background-color: darkblue;
padding: 10px;
text-align: center;
height: 60px;
color: white; }
  

CodePudding user response：

If you can attach the html it would be easier to help you. Based on what you say you can use a class for your nav, or your nav element with the code below in css

nav {
position : fixed ;
top : 0px ;
left : 0px ;
z-index : 2
}

CodePudding user response：

If you want to be fixed, you can solve it by putting position : fixed ; in the target.

If you want it to be fixed at the top, give it top:0. If you want it to be fixed at the bottom, give it bottom:0. Left and right can be written as left and right as well, and CSS units such as 10px can be used instead of the previously written value of 0.

For example, if you want to pin .navs to the top, write the code as follows

.navs{
  position : fixed;
  top : 0px;
}

You can also use the z-index to raise the target if it is below it. For example, to put .navs at the top, use z-index:999;.