How to make navbar responsive with flexbox?-CodePudding

I need help making it so when I shrink the width of my browser that it will be responsive and my navbar links will appear under my navbar title. Can someone help me out with trying to get this done.

I believe that I will need to use a flexbox to do this. I've been trying a few different ways, but cant seem to get the links in pagetitle id and the nav id to appear vertically.

html, body {  
  margin:0; 
  padding:0; 
}
body { 
  background-color: #AC876A; /* this is the turqoise color */
  color: black;  /* color of font */
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
  font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
  /* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
  position:fixed; 
  top:0px;
  left:0px;
  z-index: 1;     /* To make sure titleNav is on top of content, give it a higher z-index than content                          (content would have default value of zero). */
  width: 100%;    
  background-color:rgb(71, 39, 14);
  padding-bottom: 10px; 
  /* height: 86px; /* NEW */
  color: burlywood;
  font-family: serif; 
  font-weight: bold;
  border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
  padding:12px;
  padding-bottom: 0px;
  font-size:48px;
  letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
  position: fixed; 
  padding-right: 10rem;
  top: 0px;
  right: 0px;
  text-align:right;
  font-size:24px;
  padding-bottom: 12px;
  padding-top:32px;
  overflow: hidden; /*when content to big to fit in area */
}
#nav a {  /* no change */
  text-decoration:none;  /* Do not want links in "nav" to be underlined */
  color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
  float: left;
  padding-left: 16px;
  padding-right: 16px;
}
#nav a:hover{
  background-color: #ddd;
  color: black;
}
#nav a.active{
  border-bottom: 2px solid black;
}
#content {  /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */ 
  padding:12px;
  padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
  padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
  position: fixed;
  bottom: 0px; 
  left: 0px; 
  z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
  background-color:rgb(71, 39, 14);
  color: burlywood; 
  width:100%;
  text-align:center;
  padding:8px;         
}

<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>

<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
    <div id="pageTitle">
        U-Bin Moving
    </div>   
    <div id="nav">
        <a href="index.html" >Home</a>
        <a href="services.html">Services</a>
        <a href="about.html">About Us</a>
        <a href="blog.html">Contact</a>
    </div>
</div>

<div id="content">
    <h2>The Right Moving Company For You</h2>
    <p>
        At U-Bin Storage we will get the job done for the lowest price. 
    </p>
    <p style="text-align:center;">
        <img src="pics/box.jpg" style="width:50%; border-radius:10px;">
    </p>
</div> <!-- content. [[Keep track of nesting]] -->

<div id="footer">
    [ Kyle Hrivnak ]
</div>

CodePudding user response：

Here is the updated css file. Used flex box in the #titleNav and #nav.

    html, body {  
            margin:0; 
            padding:0; 
        }
    
        body { 
            background-color: #AC876A; /* this is the turqoise color */
            color: black;  /* color of font */
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
            font-size:16px;
        }
    
        #titleNav { /* titleNav is fixed, always at the top */
    
            /* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
            position:fixed; 
            top:0px;
            left:0px;
            z-index: 1;     
            width: 100vw;   
            background-color:rgb(71, 39, 14);
            padding-bottom: 10px; 
            /* height: 86px; /* NEW */
            color: burlywood;
            font-family: serif; 
            font-weight: bold;
            border-bottom: 1px solid #68615D;
          
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
         
       
        }
        
    
    
        #pageTitle { /* no change */
            padding:12px;
            padding-bottom: 0px;
            font-size:48px;
            letter-spacing: 1.5px; /* spaces out letters a bit */
        }
    
        #nav { /* fix the nav bar */
            display: flex;
            flex-wrap: wrap;
            font-size:24px;
            padding-bottom: 12px;
            padding-top:32px;
         
        }
        
    
        
      
        #nav a {  /* no change */
            text-decoration:none;  /* Do not want links in "nav" to be underlined */
            color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
            float: left;
            padding-left: 16px;
            padding-right: 16px;
        
        }
        
        #nav a:hover{
            background-color: #ddd;
            color: black;
        }
        
        #nav a.active{
            border-bottom: 2px solid black;
        }
    
        #content {  /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */ 
    
            padding:12px;
            padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
            padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
        }
    
        #footer { /* footer fixed, always at the bottom */
            position: fixed;
            bottom: 0px; 
            left: 0px; 
            z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
    
            background-color:rgb(71, 39, 14);
            color: burlywood; 
            width:100%;
            text-align:center;
            padding:8px;         
        }

CodePudding user response：

You can look into position: sticky; which I think would work better for you example, but to keep it simple I stuck to just correcting your CSS...

Set #content padding-top: 100px or close to 100px and remove the positioning and padding from #nav so it looks like:

#nav {
  text-align: right;
  font-size: 24px;
  overflow: hidden; /*when content to big to fit in area */
}

html, body {  
  margin:0; 
  padding:0; 
}
body { 
  background-color: #AC876A; /* this is the turqoise color */
  color: black;  /* color of font */
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
  font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
  /* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
  position:fixed; 
  top:0px;
  left:0px;
  z-index: 1;     /* To make sure titleNav is on top of content, give it a higher z-index than content                          (content would have default value of zero). */
  width: 100%;    
  background-color:rgb(71, 39, 14);
  padding-bottom: 10px; 
  /* height: 86px; /* NEW */
  color: burlywood;
  font-family: serif; 
  font-weight: bold;
  border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
  padding:12px;
  padding-bottom: 0px;
  font-size:48px;
  letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { 
  text-align:right;
  font-size:24px;
  overflow: hidden; /*when content to big to fit in area */
}
#nav a {  /* no change */
  text-decoration:none;  /* Do not want links in "nav" to be underlined */
  color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
  float: left;
  padding-left: 16px;
  padding-right: 16px;
}
#nav a:hover{
  background-color: #ddd;
  color: black;
}
#nav a.active{
  border-bottom: 2px solid black;
}
#content {  /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */ 
  padding:12px;
  padding-top: 100px; /* prevent the top of the content from getting hidden under the fixed titleNav */
  padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
  position: fixed;
  bottom: 0px; 
  left: 0px; 
  z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
  background-color:rgb(71, 39, 14);
  color: burlywood; 
  width:100%;
  text-align:center;
  padding:8px;         
}

<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>

<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
    <div id="pageTitle">
        U-Bin Moving
    </div>   
    <div id="nav">
        <a href="index.html" >Home</a>
        <a href="services.html">Services</a>
        <a href="about.html">About Us</a>
        <a href="blog.html">Contact</a>
    </div>
</div>

<div id="content">
    <h2>The Right Moving Company For You</h2>
    <p>
        At U-Bin Storage we will get the job done for the lowest price. 
    </p>
    <p style="text-align:center;">
        <img src="pics/box.jpg" style="width:50%; border-radius:10px;">
    </p>
</div> <!-- content. [[Keep track of nesting]] -->

<div id="footer">
    [ Kyle Hrivnak ]
</div>