I'm working on an assignment using media queries, and encountered an issue when I try to make the navigation bar of my website vertical for smaller screens.
I was expecting the each of the navigation links to take up a row, but instead they all stay on one row.
nav {
position: fixed;
z-index: 1000;
top: 0px;
text-align: center;
background-color: #eedfd4;
margin: auto;
width: 99%;
padding: 5px;
border-radius: 7px;
}
nav li {
list-style-type: none;
width: 10%;
text-align: center;
border-radius: 5px;
margin: 8px;
padding: 6px;
background-color: #D5BDAF;
transition: background-color 1s;
}
nav li:hover {
background-color: #d6b19b;
}
nav a {
text-decoration: none;
color: #876244;
}
@media screen and (max-width:759px) {
fig {
width: 100%;
}
footer {
width: 100%;
}
nav li {
display: block;
}
.himg {
display: none;
}
}
@media screen and (min-width:760px) {
body {
background-color: #cab9afc1;
}
}<nav>
<ul>
<li><a href=../index/index.html>Homepage</a></li>
<li><a href=../about/about.html>About Us</a></li>
<li><a href=../locations/locations.html>Locations</a></li>
<li><a href=../recommended/recommended.html>Reccomended</a></li>
<li><a href=../apply/apply.html>Apply</a></li>
<li><a href=../contact/contact.html>Contact Us</a></li>
</ul>
</nav>CodePudding user response：
I hope this will help you.
nav li {
list-style-type: none;
width: 10%;
text-align: center;
border-radius: 5px;
margin: 8px;
padding: 6px;
background-color: #D5BDAF;
transition: background-color 1s;
display: inline;
}
@media screen and (max-width:759px) {
nav li {
display: block;
}
}CodePudding user response：
If you use display: flex you can control if the elements display as a row or column in your media query. See the annotated example below:
/* added this to even up the right margin on the li items at low screen sizes */
* {
box-sizing:border-box;
}
nav {
position: fixed;
z-index: 1000;
top: 0px;
text-align: center;
background-color: #eedfd4;
margin: auto;
width: 99%;
padding: 5px;
border-radius: 7px;
}
/* added this to make the container a flex box and removed the padding-left that appears on all ul items */
nav ul {
display: flex;
padding-left:0;
}
nav li {
list-style-type: none;
/* removed this --> width:10% as it makes the text overflow the li element */
text-align: center;
border-radius: 5px;
margin: 8px;
padding: 6px;
background-color: #D5BDAF;
transition: background-color 1s;
}
nav li:hover {
background-color: #d6b19b;
}
nav a {
text-decoration: none;
color: #876244;
}
@media screen and (max-width:759px) {
fig {
width: 100%;
}
footer {
width: 100%;
}
/* added this, stacks each li element on top of each other. The default is 'row' */
nav ul {
flex-direction: column;
}
.himg {
display: none;
}
}
@media screen and (min-width:760px) {
body {
background-color: #cab9afc1;
}
}<nav>
<ul>
<li><a href=../index/index.html>Homepage</a></li>
<li><a href=../about/about.html>About Us</a></li>
<li><a href=../locations/locations.html>Locations</a></li>
<li><a href=../recommended/recommended.html>Reccomended</a></li>
<li><a href=../apply/apply.html>Apply</a></li>
<li><a href=../contact/contact.html>Contact Us</a></li>
</ul>
</nav>CodePudding user response：
A Complete solution for you using flexbox with good responsiveness :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object</title>
<!-- GOOGLE MATERIAL ICONS FONT -->
<link href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined&display=swap" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'Poppins', 'system-ui', 'sans-serif';
font-weight: 300;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-thumb {
background: #9a9a9a;
}
::-webkit-scrollbar-thumb:hover {
background: #b6b6b6;
}
body {
margin: 0;
}
a {
min-width: fit-content;
font-weight: 500;
color: white;
}
/* Whole body */
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* Navigation flex (set in #wrapper) height size to auto */
#wrapper > nav {
max-width: 100vw;
flex: 0 0 auto;
padding: 0 10px;
background: black;
overflow-y: scroll;
overflow-x: hidden;
}
/* Main Content flex (set in #wrapper) height size to auto (to fullfil page) GROWING in a flexbox */
#wrapper > section {
flex: 1 0 auto;
display: inline-flex;
justify-content: center;
align-items: center;
}
/* Controls navigation direction (row , column) */
#wrapper > nav > ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 10px;
}
/* Desnecessary Styling */
#wrapper > nav > ul > li {
min-width: fit-content;
padding: 10px;
display: inline-flex;
align-items: center;
gap: 20px;
border-radius: 100%;
background: #ffffff96;
}
#wrapper > nav > ul > li a {
display: none;
}
/* TOOGLE DEVICES */
@media screen and (min-width:760px) {
body {
background-color: #cab9afc1;
}
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#wrapper > nav {
padding: 0 !important;
margin: 10px;
background: transparent !important;
overflow-y: hidden !important;
overflow-x: scroll !important;
}
#wrapper > nav > ul {
flex-direction: row;
gap: 8px !important;
}
#wrapper > nav > ul > li {
border-radius: 0 !important;
background: black !important;
}
#wrapper > nav > ul > li a {
display: block !important;
}
._icon {
font-size: 18px !important;
color: white !important;
}
}
._icon {
font-size: 22px;
padding: 8px;
color: black;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li><span ></span><a href=../index/index.html>Homepage</a></li>
<li><span ></span><a href=../about/about.html>About Us</a></li>
<li><span ></span><a href=../locations/locations.html>Locations</a></li>
<li><span ></span><a href=../recommended/recommended.html>Reccomended</a></li>
<li><span ></span><a href=../apply/apply.html>Apply</a></li>
<li><span ></span><a href=../contact/contact.html>Contact Us</a></li>
</ul>
</nav>
<section>SECTION</section>
</div>
</body>
</html>