I'm still in the process of learning how to code, so please bear with me. I am attempting to create a navigation bar that, on desktop, will be displayed horizontally on the right side of the screen. However, when viewing on a device smaller than 800px, I want it to switch to a vertical column layout instead of a horizontal row. Unfortunately, whenever I try to implement this, it continues to display as a row even below 800px. Any assistance or guidance would be greatly appreciated!
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
@media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Education</a>
<a href="#">Resume</a>
<a href="#">Contact</a>
</nav>
</div>
</body>
</html>