I'm currently experimenting with FlexBox to enhance the design of my website, specifically focusing on creating a responsive and collapsible navigation bar for mobile users. I'm encountering issues with the flex commands in the .nbar class not working as expected. How can I go about solving this problem?
*{
margin:0;
font-family: 'Roboto', sans-serif;
}
.wrapper{
width:100%;
min-width: 960px;
margin:0 auto;
/*display:flex;
align-items: flex-end;
this is just for the night vision button to position better
*/
}
.parent{
display:flex;
flex-wrap: wrap;
/*these two at the bottomr are optional to
center them on the page
max-width: 960px;
margin:0 auto;*/
max-width: 960px;
margin: auto;
}
/*WE MISSED THE .ONE SELECTOR*/
.one{
flex-grow: 1;
}
.title{
text-align: center;
position:relative;
font-size: 50px;
top:20px;
}
.header{
height:100px;
width:100%;
order:0;
border-bottom: 1px solid rgb(0,0,0);
}
.nav{
width:100%;
/*min-width: 900px;*/
height:40px;
border-bottom: 1px solid rgb(0,0,0);
order:1;
}
.banner{
width:100%;
min-width: 960px;
height:500px;
color:white;
background-color: rgb(0,0,0);
order:3;
}
.boxOne{
width:45%;
min-width: 200px;
height:300px;
border-right: 1px solid rgb(0,0,0);
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-left: 1px solid rgb(120,120,120);
text-align: justify;
}
.boxTwo{
width:45%;
min-width: 200px;
height:300px;
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-right: 1px solid rgb(120,120,120);
}
.footer{
width:100%;
height:100px;
border-top: 1px solid rgb(0,0,0);
border-bottom: 1px solid rgb(0,0,0);
border-right: 1px solid rgb(120,120,120);
border-left: 1px solid rgb(120,120,120);
order:5;
}
.nbar{
display:flex;
flex-wrap: wrap;
align-items: stretch;
flex-flow: wrap;
}
.two{
flex-grow: 0;
}
.home {
order:1;
}
.services {
order:2;
}
.testimonials {
order:3;
}
.portfolio {
order:4;
}
.contact {
order:5;
}
li {
display:inline-flex;
padding:10px 40px 10px 60px;
font-size: 15px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: underline;
}
.disc{
padding-left: 5px;
padding-top: 5px;
font-size: 10px;
color: rgb(150,150,150);
}
.people{
overflow: hidden;
height:500px;
width:960px;
}
/*.popup {
background-color: white;
height: 20px;
width:90px;
border: 1px solid rgb(255, 0, 0);
position:fixed;
bottom:0;
}*/<!DOCTYPE html>
<html>
<!-- dockmann -->
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="parent">
<div class="one header">
<p class="title">DOCKMANN</p>
</div>
<!-- end header -->
<div class="one nav">
<ul class="nbar">
<li class="two home">
<a href="www.dockmann.com">HOME</a>
</li>
<li class="two services">
SERVICES
</li>
<li class="two testimonials">
TESTIMONIALS
</li>
<li class="two portfolio">
PORTFOLIO
</li>
<li class="two contact">
CONTACT
</li>
</ul>
</div>
<!-- end nav -->
<div class="one banner">
<img class="people" src="image/macdesk.jpg" />
</div>
<!-- end banner -->
<div class="one boxOne">
<h2>Who we are...</h2>
<br />
Filler
</div>
<!-- end boxOne -->
<div class="one boxTwo">
boxTwo
</div>
<!-- end boxTwo -->
<div class="one footer">
<p class="disc">
filler
</p>
</div>
<!-- end footer -->
</div>
<!-- <button class="popup">
Night Vision!
</div> -->
</div>
</body>
</html>