I am doing an assignment for school, and don't worry, I'm aware of how ugly this looks design wise. I wouldn't have chosen to make it look like this myself. However, I missed some points here because "NAV on schedule page does not appear stacked when in narrow screen view". Here is a link to a photo of what the nav bar is supposed to look like:
https://i.sstatic.net/tDe5b.png
And here is what it currently looks like:
https://i.sstatic.net/ZWdBV.png
---
And here is a photo of what the page is supposed to look like when narrowed to simulate a smartphone view, versus what it currently looks like:
Supposed to look like: https://i.sstatic.net/eSe62.jpg
Currently looks like: https://i.sstatic.net/XE1fx.jpg
---
And here is my HTML code for this specific page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href="yogacss.css" rel="stylesheet" />
<title>
Yoga Schedule
</title>
<meta charset="utf-8">
</head>
<div id="header">
<header class="content">
<h1>
<a href="schedule.html">Path of Light Yoga Studio</a>
</h1>
</header>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="wrapper">
<main>
<h2>
Yoga Schedule
</h2>
<p>
Mats, blocks, and blankets provided. Please arrive
10 minutes before your class begins.
Relax in our Serenity Lounge before or after your class.
</p>
<section class="flow">
<h3>
Monday — Friday
</h3>
<ul>
<li>9:00am Gentle Hatha Yoga</li>
<li>10:30am Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
<li>7:00pm Gentle Hatha Yoga</li>
</ul>
<h3>
Saturday & Sunday
</h3>
<ul>
<li>10:30am Gentle Hatha Yoga</li>
<li>Noon Vinyasa Yoga</li>
<li>1:30pm Gentle Hatha Yoga</li>
<li>3:00pm Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
</ul>
</section>
<div id="loungehero">
</div>
</main>
<footer>
Copyright © 2020 Path of Light Yoga Studio<br>
<a href="mailto:eli@gmail.com">Send Email</a>
</footer>
</div>
</html>
---
And here is my CSS code:
body {
margin: 0;
background-color: #3F2860;
color: #40407A;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #40407A;
background-image: url(sunrise.jpg);
background-repeat: no-repeat;
background-size: cover;
color: white;
font-size: 90%;
margin-top: 30px;
min-height: 200px;
}
header a:link {
color:#FFF;
text-decoration: none;
}
header a:visited {
color:#FFF;
text-decoration: none;
}
header a:hover {
color: #EDF5F5;
}
h1 {
}
nav {
padding: 1em;
padding-top: 0.5em;
position: fixed;
top: 0;
left: 0;
text-align: right;
background-color: white;
margin: 0;
padding-right: 0;
z-index: 9999;
width: 100%;
}
nav a {
text-decoration: none;
display: block;
}
nav a:link { color: #3F2860;
width: 40%;
padding-top: 0;
padding-bottom: 0;
padding-left: 1em;
padding-right: 1em;
display: inline;
}
nav a:visited { color: #497777;
}
nav a:hover { color: #A26100;
}
nav ul {
list-style-type: none;
padding: 0%;
display: flex;
margin: 0;
font-size: 1.2em;
flex-wrap: wrap;
}
.studio {
font-style: italic;
}
footer {
font-size: .60em;
font-style: italic;
text-align: center;
}
#wrapper {
background-color: #F5F5F5;
padding: 2em;
}
main {
}
#hero {
}
* {
box-sizing: border-box;
}
.floatleft {
}
.clear {
}
.onehalf {
}
.onethird {
}
.home {
height: 20vh;
padding-top: 2em;
padding-left: 10%;
}
.content {
height: 20vh;
padding-top: 2em;
padding-left: 10%;
}
#mathero {
background-image: url(yogamat.jpg);
background-repeat: no-repeat;
height: 300px;
background-size: cover;
display: none;
}
#loungehero {
background-image: url(yogalounge.jpg);
background-repeat: no-repeat;
height: 300px;
background-size: cover;
display: none;
}
section {
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
@media screen and (min-width: 600px) {
.nav ul {
grid-row: nowrap;
justify-content: flex-end;
}
.nav a:link {
width: 70em;
}
.section {
padding-left: 2em;
padding-right: 2em;
}
#mathero, #loungehero {
display: block;
padding-bottom: 1em;
}
#flow {
flex-direction: row;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
@media screen and (min-width: 1024px) {
.header {
font-size: 120%;
}
.home {
height: 50vh;
padding-top: 5em;
padding-left: 8em;
}
.content {
height: 30vh;
padding-top: 1em;
padding-left: 8em;
}
#wrapper {
margin: auto;
width: 80%;
}
}
---
Thank you so much if you can provide help, I'd be incredibly grateful. This has been frustrating me.
There are different approaches to do this, but as per your code structure and requirements, the simplest solution for you is:
Restructure your navigation HTML code as below :
<nav>
<ul>
<li><a href="index.html">Home</a> <br /> <a href="classes.html">Classes</a></li>
<li><a href="schedule.html">Schedule</a> <br /><a href="contact.html">Contact</a></li>
</ul>
</nav>
and update your following CSS Code to get the desired result:
nav ul {
list-style-type: none;
padding: 0%;
display: flex;
font-size: 1.2em;
flex-wrap: wrap;
width: 100%;
margin: 0;
justify-content: space-evenly;
}
nav ul li {
display: block;
text-align: left;
}
nav ul li:first-child {
text-align: right;
}
nav a:link {
color: #3F2860;
width: auto;
padding: 0;
display: inline-block;
margin-bottom: 5px;
}
nav ul li:first-child a{
color:#477677;
}
Note: it will work perfectly on all devices.